Why does my SASS style only apply partially? - reactjs

Question

I'm creating a react component library. Styling needs to be isolated, apart from some global variables. My styling is not applying everywhere, only on some pages. Why is this and how can I fix it?
My webpack.config.js:
const webpack = require('webpack');
const path = require('path');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName:
'[name]-[local]-[hash:base64:3]',
},
import: true,
importLoaders: true,
}
},
{
loader: 'sass-loader',
},
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/styles/variables/_variables.scss'),
path.resolve(__dirname, '../src/styles/variables/_header.scss'),
path.resolve(__dirname, '../src/styles/variables/_footer.scss')
]
}
}
],
});
return config;
};
For example: I have a module "Checkbox". The story for the module is below. The first story is styled, the second story is not.
stories.add('Empty', () => (
<Checkbox />
));
stories.add('With Label', () => (
<Checkbox classes={propsClasses} field={'Field'} label={'Label'} />
));
EDIT:
With the webpack.config.js below, all the styles load. But then ALL the styles load on EVERY page. Which makes for duplicate style and no longer an isolated component.
const webpack = require('webpack');
const path = require('path');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[local]',
},
import: true,
importLoaders: true,
}
},
{
loader: 'sass-loader',
},
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/styles/variables/_variables.scss'),
path.resolve(__dirname, '../src/styles/variables/_header.scss'),
path.resolve(__dirname, '../src/styles/variables/_footer.scss')
]
}
}
],
});
return config;
};

Answer 1

Webpack bundles CSS files when they are required, the same way it bundles JS files when they are required. When using sass-loader, css-loader, and style-loader, the require will pass the Sass source code through those loaders and the result is JS code that will insert the transpiled CSS into a <style> element on the page at runtime. That JS code is what gets added to the bundle webpack creates.
I'm not familiar with sass-resources-loader, but per its README, This loader will #import your SASS resources into every required SASS module -- this is likely why you're seeing all of your styles imported for each module...?
To isolate your styles on a per-component basis, you probably want a .scss file for each component that contains styles for that component, and to require() that .scss file in its JS module. Because webpack processes each Sass file independently, as it's required, each component's Sass file will need to import any variables/mixins it needs. (It sounds like sass-resources-loader is trying to handle that for you, but not giving the desired results?)
How are you loading your Sass files currently?