无法使用加载器将样式应用于 React答案

【问题标题】：Can't apply styles to React using loaders无法使用加载器将样式应用于 React
【发布时间】：2019-11-15 11:22:39
【问题描述】：

在我的 webpack.config.js 中，我按照推荐添加了“style-loader”和“css-loader”。我还在我的根组件中从“./style.css”（从“./style.css”中导入样式）导入了样式。但它不会将样式应用于我的应用程序。我究竟做错了什么？我错过了什么？我有“找不到模块：错误：无法解析‘文件’或‘目录’”

  ...
 output: {
   path: __dirname + './static',
   filename: 'app.bundle.js'
 }, 
 {
   test:/\.css$/,
   use: [
      "style-loader",
      "css-loader",
     ]
 }
  ...

【问题讨论】：

标签： css reactjs webpack

【解决方案1】：

您的output.path 似乎有误。像这样为我工作。

编辑：另外，加载器进入 modules.rules

const path = require('path');
.
.
.    

output: {
   path: path.join(__dirname, 'static/')
   filename: 'app.bundle.js'
 },
 module: {
  rules:[
 {
   test:/\.css$/,
   use: [
      "style-loader",
      "css-loader",
     ]
 }
]}

【讨论】：

我遇到了另一个“错误：加载器列表中的元素应该包含“加载器”或“加载器”字段之一。就是做不出来。

【解决方案2】：

你应该改成loader这样的东西

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }

【讨论】：