webpack.config.js 的 Neat (Bourbon) 编译问题

Question

美好的一天：

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

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

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

我安装的gem是：

波旁威士忌 (5.0.0.beta.8)
苦涩 (1.7.0)
整洁 (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 的 Neat (Bourbon) 编译问题

Neat (Bourbon) compilation issues with webpack.config.js

sass

neat

bourbon

webpack