如何配置Webpack（或Babel）以便在React项目中使用sass？

Question

从标题开始，我不知道从哪里开始配置任何内容，以便能够为我的组件使用 .scss 文件。 我知道如何在 webpack.config.js 中配置加载器，但在我的样板文件中，没有 webpack。（dev | prod）.config.js

我读过我应该创建一个 .babelrc ，但后来我迷路了。 任何人都可以帮我这个吗？

我项目的结构： structure folders of project

Answer 1

您需要使用npm安装一些加载器：

npm i style-loader css-loader sass-loader --save-dev

然后你需要将加载器添加到webpack配置文件的module部分：

module: {
  loaders: [
    // Sass
    {
      test: /\.scss$/,
      loader: 'style-loader!css-loader!sass-loader'
    },
    // CSS
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
 }