Search code examples
webpacksassbourbonneat

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

Good day:

I'm currently trying to compile my _layout.sass file into CSS and I have dependencies on Bourbon and Neat. My current _layout.sass is this:

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

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

And the gems I have installed are:

  • bourbon (5.0.0.beta.8)
  • bitters (1.7.0)
  • neat (2.1.0)

My webpack.config.js is:

 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")
     ]
  };

The error I am getting is this:

 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

I'm currently using webpack version ^3.5.5.

Thanks

Solution

  • The issue was that in my _layout.sass, sass syntax for indentation is without the curly brackets http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html