imported styles not loaded with ExtractTextPlugin - sass

Question

my styles are not loading when I use the following syntax
import '../styles/some-component.scss';
but they will load when I use modules like so (which makes sense that they should since I have the css-loader modules option set to true):
import '../styles/some-component.scss';
const className = styles.panel;
// etc...
to expand on the above, I'm loading the styles into React components like so:
import React from 'react';
import '../styles/loading-overlay.scss';
const LoadingOverlay = ({ loadingMessage}) => {
return (<div className="loading-effect-overlay">
<Blah loadingMessage={loadingMessage} />
</div>
);
};
export default LoadingOverlay;
I know I could easily inline the styles via import '!style-loader!css-loader!sass-loader!../styles/loading-overlay.scss';, but I want them exported to the separate components css file.
I am using Webpack 2.2.1 and extract-text-webpack-plugin 2.0.0-rc.3
Here are the relevant (AFAIK) parts of the Webpack config:
const extractScss = new ExtractTextPlugin({
filename: '../css/components.css',
allChunks: true,
disable: enableDevServer
});
// etc...
config.module.rules.unshift({
test: /\.scss$/,
loader: extractScss.extract({
fallback: 'style-loader',
use: isProd ?
[
{
loader: 'css-loader',
options: {
localIdentName: '[name]-[local]-[hash:base64:5]',
modules: true,
// TODO: should we be using the minimize option here?
// minimize: true,
importLoaders: 1
}
},
'postcss-loader',
'sass-loader'
] :
[
{
loader: 'css-loader',
options: {
localIdentName: '[name]-[local]-[hash:base64:5]',
modules: true,
sourceMap: true,
importLoaders: 1
}
},
'postcss-loader',
'sass-loader?sourceMap'
]
})
});
any ideas why this might not be working? any additional info I need to provide?

Answer 1

As you are using CSS-Modules integration with React, then all your CSS classes will be converted using this format: [name]-[local]-[hash:base64:5] where name is the component name.
Try to import the styles like that:
import React from 'react';
import styles from './LoadingOverlay.module.css';
const LoadingOverlay = ({ loadingMessage}) => {
return (<div className={styles.overlay}>
<Blah loadingMessage={loadingMessage} />
</div>
);
};
export default LoadingOverlay;
And create .overlay class inside you LoadingOverlay.module.css file.
Note that CSS Modules is a technique for having CSS integrated with modules.
If you want to combine two different techniques like CSS-Modules and SASS you should be adding two different rules in webpack one per each. Something like that (the key is include rule which allows you to use different rules for different subfolders). Let´s say you have you normal SASS css files under app/stylesheets and your css modules under app/src.
{
test: /\.scss$/i,
include: resolve(__dirname, './../app/stylesheets'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
})
},
{
test: /\.css$/i,
include: resolve(__dirname, './../app/src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
camelCase: true,
localIdentName: '[name]_[local]_[hash:base64:5]',
minimize: true
},
},
{
loader: 'postcss-loader'
}
]
})
}
Hope that helps.