Sass-friendly CSS Modules
// The motivation is to avoid having to explicitly import infrastructure Sass files | |
// (those containing only variables/mixins/functions etc). This enables a more classic | |
// Sass dev experience, with the end result still being good ol' CSS Modules. | |
// First, make a shared.scss file which imports all of your Sass variables, mixins and functions. | |
// Note that nothing in that bundle should create CSS, otherwise, that CSS will be prepended to any | |
// Sass file you import with CSS modules. Then: | |
// With Webpack 1, add a sassLoader options object to your webpack.config.js module: | |
module.exports = { | |
... | |
sassLoader: { | |
data: '@import "shared.scss";', | |
includePaths: [ | |
path.resolve(__dirname, '/app/css') | |
] | |
} | |
}; | |
// In Webpack 2, that object has moved into the loader config: | |
module.exports = { | |
//... | |
module: { | |
rules: [{ | |
test: /\.scss$/, | |
use: [{ | |
loader: "sass-loader", | |
options: { | |
data: '@import "shared.scss";', | |
includePaths: [ | |
path.resolve(__dirname, '/app/css') | |
] | |
} | |
}] | |
}] | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment