如何配置Webpack(或Babel)以便在React项目中使用sass?

时间:2017-11-27 22:20:49

标签: reactjs webpack sass-loader

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

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

我项目的结构: structure folders of project

1 个答案:

答案 0 :(得分: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'
    }
 }