Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/ below:

gatsby-plugin-sass | Gatsby

Provides drop-in support for Sass/SCSS stylesheets

npm install sass gatsby-plugin-sass

1. Include the plugin in your gatsby-config.js file.

gatsby-config.js

plugins: [`gatsby-plugin-sass`]

1. Write your stylesheets in Sass/SCSS and require or import them as normal.

src/index.scss

html {
  background-color: rebeccapurple;
  p {
    color: white;
  }
}

gatsby-browser.js

import "./src/index.scss"

If you need to pass options to Sass use the plugins options, see node-sass/dart-sass docs for all available options.

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      sassOptions: {
        includePaths: ["absolute/path/a", "absolute/path/b"],
        ...
      }
    },
  },
]

If you need to override the default options passed into css-loader. Note: Gatsby is using css-loader@^5.0.0.

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      cssLoaderOptions: {
        camelCase: false,
      },
    },
  },
]

Prepends Sass code before the actual entry file. In this case, the sass-loader will not override the data option but just prepend the entry’s content. You might use this to prepend things like environmental variables (as Sass variables) or even prepend a global Sass import to be used in other Sass files (functions, mixins, variables, etc.).

See webpack’s sass-loader documentation for reference.

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      additionalData: "$env: " + process.env.NODE_ENV + ";",
    },
  },
]

By default, the Dart implementation of Sass (sass) is used. To use the implementation written in Node (node-sass), you can install node-sass instead of sass and pass it into the options as the implementation:

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("node-sass"),
    },
  },
]

sass intentionally doesn’t have support for setting a custom precision. node-sass defaults to 5 digits of precision. If you want some other level of precision (e.g. if you use Bootstrap), you may configure it as follows:

See Bootstrap’s documentation on theming for reference.

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("node-sass"),
      postCssPlugins: [somePostCssPlugin()],
      sassOptions: {
        precision: 6,
      },
    },
  },
]

See bootstrap-sass for reference.

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("node-sass"),
      postCssPlugins: [somePostCssPlugin()],
      sassOptions: {
        precision: 8,
      },
    },
  },
]

Using CSS Modules requires no additional configuration. Simply prepend .module to the extension. For example: app.scss -> app.module.scss. Any file with the module extension will use CSS Modules. CSS modules are imported as ES Modules to support treeshaking. You’ll need to import styles as: import { yourClassName, anotherClassName } from './app.module.scss'

To override the file regex for Sass or CSS modules,

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      
      sassRuleTest: /\.global\.s(a|c)ss$/,
      
      sassRuleModulesTest: /\.mod\.s(a|c)ss$/,
    },
  },
]

PostCSS is also included to handle some default optimizations like autoprefixing and common cross-browser flexbox bugs. Normally you don’t need to think about it, but if you’d prefer to add additional postprocessing to your Sass output you can specify plugins in the plugin options.

This plugin resolves url() paths relative to the entry SCSS/Sass file not – as might be expected – the location relative to the declaration. Under the hood, it makes use of sass-loader and this is documented in the readme.

Using resolve-url-loader provides a workaround, if you want to use relative url just install the plugin and then add it to your Sass plugin options configuration.

First:

npm install resolve-url-loader --save-dev

And then:

gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-sass",
    options: {
      useResolveUrlLoader: true,
    },
  },
]

You can also configure resolve-url-plugin providing some options (see plugin documentation for all options):

gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-sass",
    options: {
      useResolveUrlLoader: {
        options: {
          debug: true,
        },
      },
    },
  },
]

Please note: Adding resolve-url-loader will use sourceMap: true on sass-loader (as it is required for the plugin to work), you can then activate/deactivate source-map for Sass files in the plugin:

gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-sass",
    options: {
      useResolveUrlLoader: {
        options: {
          sourceMap: true, 
        },
      },
    },
  },
]

• sass-loader is updated to v10 which adds support for node-sass@^5.0.0 but also switches the default implementation to sass. webpack also recommends using sass so this is reflected in the documentation here, too. In the deprecation notice of node-sass it is noted that switching from node-sass to sass is straightforward as both packages use the same JavaScript API.
• All options for both node-sass & sass are moved into the sassOptions object
• You’re now able to override the importLoaders option. If you have this in your options but don’t intend to override it, you’ll need to remove it

• node-sass is moved to a peer dependency. Installing the package alongside gatsby-plugin-sass is now required. Use npm install node-sass

• support Gatsby v2 only

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4