Webpack加载器配置以加载React JS的CSS和SASS文件 [英] Webpack loader configuration to load css and sass files for React JS

问题描述

我已经在使用create-react-app制作的React应用中安装了 react-h5-audio-player ，并且运行良好.

I have installed react-h5-audio-player in a React app made with create-react-app and it worked fine.

我对定制的React项目做了同样的事情，并被要求配置webpack来加载css文件.

I did same to customized React project and I am being asked to configure webpack to load the css files.

webpack.config.js

webpack.config.js

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

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

I have attached screenshot of error log and code section where error happened

错误(

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

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

) happened in the below css file, these css files are made by installed audio player (which is made with typescript)

.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;
}

推荐答案

您需要添加css-loader和style-loader以使您的Webpack捆绑CSS文件:

You need to add css-loader and style-loader to enable your webpack to bundle CSS files:

安装装载机:

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

这篇关于Webpack加载器配置以加载React JS的CSS和SASS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！