Imported node_modules css not working in webpack

Question

I have an external css imports inside one of my components -

import "rc-slider/assets/index.css";

However, when building with webpack, the css in not being registered. I've tried adding an import prefixed with a tilde @import '~rc-slider/assets/index.css'; in my components module.css file, but that does not work. I've also tried adding include: [path.join(__dirname, '..', 'node_modules')], to my webpack.config.js file, and it results in a failed build with multiple errors that say You may need an appropriate loader to handle this file type. for each of my files.

My webpack.config.js file is the following:

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                            modules: true,
                            localIdentName: "[name]__[local]__[hash:base64:5]"
                        }
                    },
                    {
                        loader: "sass-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins() {
                                return [autoprefixer];
                            }
                        }
                    },
                ]
            },
            {
                test: /\.(png|jp(e*)g|gif|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8000,
                            name: "images/[hash]-[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        }),
        new BundleAnalyzerPlugin()
    ]
};

This has taken up half my day already, so any input would be of huge help. Thank you.

Sean · Accepted Answer · 2019-06-14 17:25:31Z

3

After a few more hours of trial and error, I found a solution. For anyone encountering this issue in the future, I fixed it by adding the following test to my webpack.config.js file -

{
    test: /\.(scss|css)$/,
    include: [CODEMIRROR_PATH],
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",

        },
    ]
},

My fill config setup is the following -

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const CODEMIRROR_PATH = path.resolve(
    __dirname,
    "./node_modules/rc-slider/assets/index.css"
);

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(scss|css)$/,
                include: [CODEMIRROR_PATH],
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",

                    },
                ]
            },
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                            modules: true,
                            localIdentName: "[name]__[local]__[hash:base64:5]"
                        }
                    },


                    {
                        loader: "sass-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins() {
                                return [autoprefixer];
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(png|jp(e*)g|gif|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8000,
                            name: "images/[hash]-[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },    
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        }),
        new BundleAnalyzerPlugin()
    ]
};

answered Jun 14, 2019 at 17:25

Sean

5451 gold badge7 silver badges18 bronze badges

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

4 Comments

Zerium Over a year ago

Great to see that you fixed your problem. May I suggest renaming CODEMIRROR_PATH? You're obviously not using CodeMirror, so perhaps a different name here is appropriate. :)

Sean Over a year ago

Absolutely. Thanks for the heads up.

Zen1 Over a year ago

A few years late, but thank you for posting your solution. This helped me out quite a bit.

Sean Over a year ago

Glad it helped!

Zerium · Accepted Answer · 2019-06-14 01:13:55Z

0

Using the include property is definitely the way to go.

I have something similar in my code, and I used this:

{
  test: /\.css$/,
  include: [CODEMIRROR_PATH],
  use: ["style-loader", "css-loader"]
},

I'm including CodeMirror; as such, I define CODEMIRROR_PATH as follows:

const CODEMIRROR_PATH = path.resolve(__dirname, "./node_modules/codemirror");

Does something similar not work for you?

answered Jun 14, 2019 at 1:13

Zerium

17.4k33 gold badges120 silver badges187 bronze badges

3 Comments

Sean Over a year ago

Unfortunately, when I add the include, all of my css files modules do not parse and I get the error: Module parse failed: Unexpected token (1:5) You may need an appropriate loader to handle this file type.. I am not sure why including a package in the node_modules folder is causing the css loaders to fail.

Zerium Over a year ago

@Sean I think there's more to this issue than that. Do you mind updating your question to include the full error log after "Unexpected token"?

Sean Over a year ago

I found a solution and posted. Thank you for steering me in the right direction. Your approach worked, but I needed to add another css-loader and style-loader test, so that I had one which excludes the node_modules folder, and one that includes the specific css file.

Collectives™ on Stack Overflow

Imported node_modules css not working in webpack

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related