导入的 node_modules css 在 webpack 中不起作用

IT技术 reactjs webpack
2021-04-30 02:10:17

我的一个组件中有一个外部 css 导入 -

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

但是，在使用 webpack 构建时，未注册 css。我已经尝试@import '~rc-slider/assets/index.css';在我的组件 module.css 文件中添加一个以波浪号为前缀的导入，但这不起作用。我还尝试添加include: [path.join(__dirname, '..', 'node_modules')],到我的 webpack.config.js 文件中，它导致构建失败，并显示我的每个文件的多个错误You may need an appropriate loader to handle this file type.。

我的 webpack.config.js 文件如下： 

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()
    ]
};

这已经占用了我半天的时间，所以任何输入都会有很大的帮助。谢谢你。

2个回答

经过几个小时的反复试验，我找到了解决方案。对于将来遇到此问题的任何人，我通过将以下测试添加到我的 webpack.config.js 文件来修复它 -

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

        },
    ]
},

我的填充配置设置如下 -

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()
    ]
};

使用该include物业绝对是要走的路。

我的代码中有类似的东西，我使用了这个：

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

我包括 CodeMirror；因此，我定义CODEMIRROR_PATH如下：

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

类似的东西对你不起作用吗？

其它你可能感兴趣的问题
上一篇使用 redux-api-middleware 处理图片/jpeg 内容 下一篇react-bootstrap nav.link 路由