Javascript 用于为React JS加载css和sass文件的网页包加载程序配置

我已经在用create react app制作的react应用程序中安装了react-h5-audio-player，效果很好

我对定制的React项目做了同样的操作，我被要求配置webpack以加载css文件

webpack.config.js

module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
  };

我附上了错误日志的截图和发生错误的代码部分

错误(

)发生在下面的css文件中，这些css文件是由安装的音频播放器制作的（使用typescript制作）

---

您需要添加

css加载程序

和

style加载程序

，以使您的网页能够绑定

css

文件：

安装装载机：

npm install css-loader style-loader --save-dev
npm install sass-loader node-sass --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        loader: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ]
  }
};

在网页包配置中设置规则：

npm install css-loader style-loader --save-dev
npm install sass-loader node-sass --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        loader: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ]
  }
};

---

检查，并

谢谢它工作了，但是页面中仍然缺少一些css部分，我的意思是音频播放器UI不同，我希望我可能需要添加sass文件。我如何为所有类型的css相关文件配置webpack？感谢您的努力，UI中仍然缺少一些内容，未知原因感谢您的回复，代码现在工作得很好。忘记安装样式加载器，非常喜欢4 uYeah，我使用react和Django。谢谢你的信息