Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.