imported styles not loaded with ExtractTextPlugin

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?

do you mean that there is no external stylesheet being created for them? where are you importing the stylesheets? — thesublimeobject, Feb 17 '17 at 20:44
yeah the styles aren't being generated in the output components.css file - I'm importing the style sheets in React components (I'll provide an example above) — Jordan, Feb 17 '17 at 20:56
I assume you have the plugin registered in your config file as well? — thesublimeobject, Feb 17 '17 at 21:02
yes and it's working for everything else except where I'm using this specific style of import (which is basically only being used for shared components) — Jordan, Feb 17 '17 at 21:07

José Quinto Zamora · Answer 1 · 2017-02-19T08:29:12.540

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.

Thank you for the detailed response.. I know what CSS modules are. We have a good deal of legacy code which is why I'm using SASS. Still I don't know why I shouldn't be able to use this syntax alongside CSS modules — Jordan, Feb 18 '17 at 12:59

imported styles not loaded with ExtractTextPlugin

1 Answers1