Webpack 和 sass

Question

我在使用 webpack 加载 scss 文件时遇到问题。

我收到这个错误：

Module build failed: 
@import 'bulma';
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "content = requi..."

这是我的 webpack 配置文件：

module.exports = {
  entry: "./app/App.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['css', 'sass', 'style']
      }
    ]
  }
};

这是main.scss:

@import 'bulma';

body {
  background-color: red;
}

然后我在 App.js 入口点导入文件，如下所示：

import './stylesheets/main.scss';

有什么建议吗？

Answer 1

您的装载机顺序错误。加载器是从右到左读取的。您想将 SCSS 解析为 CSS，然后将 CSS 解析为 Javascript，然后将解析后的 CSS 作为样式标签加载，因此您需要：

        loaders: ['style', 'css', 'sass']

Webpack 和 sass

Webpack and sass

reactjs

webpack

webpack-style-loader

sass-loader