Webpack加载器配置为React JS加载CSS和SASS文件

Anoop K乔治

我已经在用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"
          }
        }
      ]
    }
  };

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

错误（

ERROR in ./node_modules/react-h5-audio-player/lib/styles.css 1:0
Module parse failed: Unexpected token (1:0)

）发生在以下css文件中，这些css文件是由已安装的音频播放器（由打字稿制作）制作的

.rhap_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: inherit;
  width: 100%;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
.rhap_container:focus:not(:focus-visible) {
  outline: 0;
}

阿吉特·莎（Ajeet Shah）

您需要添加css-loader，并style-loader让您的WebPack捆绑CSS文件：

安装装载机：

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

在webpack配置中设置规则：

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-loader，style-loader和sass-loader

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。