CSS is loaded but not applied via webpack

Question

I'm currently setting up my webpack to extract all .css and .scss files into 1 large file which is done by using extract-text-webpack-plugin. I can see that the file is correctly compiled and is included into the html (created with html-webpack-plugin). But for some reason the css is not applied to the actual page.

Entry

entry: {
    app: [
        'react-fastclick',
        './js/index.js',
    ],

    styles: './styles/global.scss'
}

Rules

rules: [
    {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[hash:base64:5]',
                        minimize: true,
                        sourceMap: true
                    },
                },
                {
                    loader: 'sass-loader',
                    options: {
                        outputStyle: 'collapsed',
                        sourceMap: true,
                        includePaths: [path.resolve(__dirname, 'src')]
                    },
                },
            ],
            publicPath: '/dist'
        })
    }
    // ...
]

Plugins

plugins: [
    new HtmlWebpackPlugin({
        title: 'Wizer',
        hash: false,
        production: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true
        },
        template: 'index.ejs',
    }),

    new ExtractTextPlugin({
        filename: '[name].[chunkhash].css',
        disable: false,
        allChunks: true
    }),

    // ...
]

HTML output

<!DOCTYPE html>
<html>

<head>
    <link rel="preload" href="/app.f599f29bd646377f7788.js" as="script">
    <link rel="preload" href="/styles.e3acd4dcb1836b477ae7.css" as="script">
    <link rel="preload" href="/vendor.52867bd4bd63ce12d65a.js" as="script">
    <link href="/styles.e3acd4dcb1836b477ae7.css" rel="stylesheet">
</head>

<body>
    <div id="react_root"></div>
    <script type="text/javascript" src="/vendor.52867bd4bd63ce12d65a.js"></script>
    <script type="text/javascript" src="/app.f599f29bd646377f7788.js"></script>
</body>

</html>

Possible duplicate of [webpack2: how to import Bootstrap CSS for react-bootstrap to find its styles?](https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for-react-bootstrap-to-find-its-styles) — Michael Jungo, Jul 25 '17 at 13:53
It indeed had to do with the `modules` set to `true` thanks! — NealVDV, Jul 25 '17 at 14:11

score 0 · Answer 1 · answered Jul 25 '17 at 14:43

0

removing the modules from the css-loader fixed it for me, it was creating locally scoped css.

answered Jul 25 '17 at 14:43

NealVDV

2,302
3
26
51

CSS is loaded but not applied via webpack

1 Answers1