Cannot load css file in webpack 4

Question

Given the following webpack 4 config:

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== 'production'
const devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})

module.exports = {
    mode: "development",
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000',
        'webpack/hot/only-dev-server',
        "./app/app.js"
    ],
    output: {
        path: path.join(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            { 
                test: /\.jsx|\.js?$/, 
                loader: 'babel-loader',
                options: {
                    plugins: [
                        'react-hot-loader/babel'
                    ]
                },
                exclude: /node_modules/},
            {
                test: /\.jsx|\.js$/,
                exclude: /node_modules/,
                use: [
                'babel-loader?' + JSON.stringify({presets: ['env', 'react']}),
                {
                    loader: 'eslint-loader'
                }]
            },
            {
                test: /\.css$/,
                include: /stylesheets|node_modules/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
            },
            {
                test: /\.scss$/,
                include: /stylesheets/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(jpg|png|gif|eot|woff|ttf|svg)/,
                loader: "file"
            }
        ]
    },
    devServer: {
        contentBase: "./build",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        devFlagPlugin,
        new webpack.NoEmitOnErrorsPlugin()
    ]

};

I am trying to load a css file from /stylesheets/app.css in app.js:

require('./stylesheets/app.css')
let routes = (
    <div className="app">
        <Router>
            <div>hello</div>
        </Router>
    </div>
)

render(routes, document.getElementById('root'))

The app.css file is defined as:

html {
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 20px;
    height: 100%;
}

But when I start the program with:

webpack-dev-server --host 0.0.0.0 --port 3000 --hot --progress --colors

The content has no style associated with it.

Am I missing anything in the webpack config?

jamesdeath123 · Accepted Answer · 2018-06-30 22:54:48Z

5

In case someone else fall into the same problem, here is the correct config for css/scss loaders:

{
    test: /\.css$/,
    include: /stylesheets|node_modules/,
    use: ["style-loader", "css-loader"]
},
{
    test: /\.scss$/,
    include: /stylesheets/,
    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}

The MiniCssExtractPlugin.loader is not used; it is only used as a plugin.

answered Jun 30, 2018 at 22:54

jamesdeath123

4,71813 gold badges58 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PlayMa256 Over a year ago

Actually, MiniCssExtractPlugin.loader is required if you want to remove css from bundles and have them into separate files, which is only desirable for production.

jamesdeath123 Over a year ago

@MatheusSilva I see. What would you suggest to be the right answer? I will be happy to accept it if you post the detailed answer. My Config is for development, but details about setting it up in production is greatly appreciated.

PlayMa256 Over a year ago

Sure, i'll refactor this and put something together

Collectives™ on Stack Overflow

Cannot load css file in webpack 4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related