razzle-plugin-scss

This package contains a plugin for using SCSS/SASS with Razzle

Usage in Razzle Projects

``bash
yarn add razzle-plugin-scss --dev
`

$3

`js
// razzle.config.js

module.exports = {
plugins: ['scss'],
};
`

Files with an ending in the name _.module.scss and _.module.sass will load as cssModules

example:

`jsx
import s from './myfile.module.scss';
`

---

$3

`js
// razzle.config.js

module.exports = {
plugins: [
{
name: 'scss',
options: {
postcss: {
dev: {
sourceMap: false,
},
},
},
},
],
};
`

Options

Please remember that custom options will extends default options using Object.assign.
Array such as postcss.plugins WILL NOT BE EXTENDED OR CONCATED, it will override all default plugins.

---

$3

default

`js
{
dev: {
sourceMap: true,
ident: 'postcss',
},
prod: {
sourceMap: false,
ident: 'postcss',
},
plugins: [
PostCssFlexBugFixes,
autoprefixer({
browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
flexbox: 'no-2009',
}),
],
}
`

Set dev to add config to postcss in development.
Set prod to add config to postcss in production.

See postcss loader options to override configs.

---

$3

default

`js
{
dev: {
sassOptions: {
sourceMap: true,
includePaths: [paths.appNodeModules],
},
},
prod: {
sassOptions: {
sourceMap: true,
sourceMapContents: false,
includePaths: [paths.appNodeModules],
},
},
},
`

Set dev to add config to postcss in development.
Set prod to add config to postcss in production.

See node-sass options to override configs.

---

$3

default

`js
{
dev: {
sourceMap: true,
importLoaders: 1,
modules: {
auto: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
prod: {
sourceMap: razzleOptions.enableSourceMaps,
importLoaders: 1,
modules: {
auto: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
`

Set dev to add config to postcss in development.
Set prod to add config to postcss in production.

See css loader options to override configs.

---

#### style

default

`js
{
}
`

Style loader only used in development environment.

See style loader options to override configs.

#### resolveUrl

default

`js
{
dev: {},
prod: {},
}
`

Set dev to add config to postcss in development.
Set prod to add config to postcss in production`.

See resolve url loader options to override configs.