Question

美好的一天：

我目前正在尝试将我的_layout.sass文件编译成CSS，并且我依赖于Bourbon和Neat。我目前的_layout.sass是这样的：

 @import '../bourbon/bourbon';
 @import '../base/base';
 @import "../neat/neat";

 .default-neat-grid {
   @include grid-container;
 }

我安装的宝石是：

bourbon（5.0.0.beta.8）
苦味（1.7.0）
neat（2.1.0）

我的 webpack.config.js 是：

 const ExtractTextPlugin = require("extract-text-webpack-plugin");

 module.exports = {
    entry : __dirname + '/app/index.js',
    module : {
       rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
           test: /\.(s(a|c)|c)ss$/,
           use: ['style-loader', 'css-loader', 'sass-loader'],
        }
       ]
     },
     output: {
      filename : 'bundled.js',
      path : __dirname + '/build'
     },
     watch: true,
     watchOptions: {
       aggregateTimeout: 300,
       poll: 200
     },
     plugins: [
        new ExtractTextPlugin("styles.css")
     ]
  };

我得到的错误是：

 ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!/home/vagrant/Projects/com_oauth_manager/media/com_oauth_manager/sass/layout/_layout.sass
 Module build failed: 
.default-neat-grid {
                   ^
  Invalid CSS after "...ult-neat-grid {": expected "}", was "{"
  in /home/vagrant/Projects/com_oauth_manager/media/com_oauth_manager/sass/layout/_layout.sass (line 5, column 21)
 Error: 
 .default-neat-grid {
                    ^
  Invalid CSS after "...ult-neat-grid {": expected "}", was "{"
  in /home/vagrant/Projects/com_oauth_manager/media/com_oauth_manager/sass/layout/_layout.sass (line 5, column 21)
at options.error (/home/vagrant/Projects/com_oauth_manager/media/com_oauth_manager/js/com_oauthmanager/node_modules/node-sass/lib/index.js:291:26)
  @ /home/vagrant/Projects/com_oauth_manager/media/com_oauth_manager/sass/layout/_layout.sass 4:14-165
  @ ./app/component/App.js
  @ ./app/index.js
  ^C

我目前正在使用webpack版本^3.5.5。

由于

Answer 1

问题在于，在我的 _layout.sass 中，缩进的sass语法没有大括号http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html

Webpack.config.js中的整洁（波旁）编译问题

1 个答案: