Question

在我的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",
     ]
 }
  ...

Answer 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",
     ]
 }
]}

Answer 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"
            }
        ]
    }

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

2 个答案: