Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)

Question

Using Webpack 2 and sass-loader 4.11

webpack --config webpack.config.js

Here is my webpack.config.js

var path = require('path');
var sass = require("./sass/lifeleveler.scss");

module.exports = {
    entry: './dist/main.js',
    output: {
        filename: 'lifeleveler.app.js',
        path: path.resolve(__dirname, 'dist')
    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, './sass')
                ],
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ],
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                use: "source-map-loader"
            }
        ]
    },
    sassLoader: {
        includePaths: [path.resolve(__dirname, "./sass")]
    },
    resolve: {
        modulesDirectories: ['./sass'],
        extensions: [".tsx", ".ts", ".js", "scss"]
    },
    devtool: 'inline-source-map'
};

---

Note when I tried this at the top of my config:

var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");

Got this error:

Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'

Which is why I went with just this: var sass = require("./sass/lifeleveler.scss");

---

And my lifeleveler.scss file (from my SASS project starter kit):

@import "vendors/normalize";    // Normalize stylesheet
@import "vendors/reset";        // Reset stylesheet
@import "modules/base";         // Load base files
@import "modules/defaults";     // Defaults elements
@import "modules/inputs";       // Inputs & Selects
@import "modules/buttons";      // Buttons
@import "modules/layout";       // Load Layouts
@import "modules/svg";          // Load SVG
@import "modules/queries";      // Media Queries

Any finally my folder structure, do you see any glaring issues?

I found this solution here, however I added my ./sass path to the modulesDirectories array and still getting the error.

After more digging I also found this Github issue and solution here, but his fix didn't work for me either :(

Answer 1

I reproduced your issue here and was able to fix it.

First of all, you need to change your webpack configuration file. Some points:

1. put yout scss loader inside rules option and separate each loader into an object (like this);
2. get rid of the line var sass = require("./sass/lifeleveler.scss"); at the top of the configuration. The file should be called from your entrypoint JS. In this case: dist/main.js. At this point (before reading the config), webpack is not configured to load any stuff. That's causing the error you showed.
3. get rid of sassLoader.includePaths and resolve.modulesDirectories, as they are not valid webpack 2 keys.

Webpack 2 configuration structure is a bit different from Webpack 1 (you can check a official migration guide here)..

The working webpack.config.js file would be something like this:

var path = require('path');


module.exports = {
    entry: './dist/main.js',
    output: {
        filename: 'lifeleveler.app.js',
        path: path.resolve(__dirname, 'dist')
    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, "sass")
                ],             
                use: [
                     { loader: "style-loader" },
                     { loader: "css-loader" },
                     { loader: "sass-loader" }
                ]
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                use: "source-map-loader"
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", "scss"]
    },
    devtool: 'inline-source-map'
};

In your main.js, now you can require your scss file calling:

require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist

Make sure you've npm installed style-loader, css-loader, node-sass and sass-loader.

Now compiles correctly!

Answer 2

Try this configuration to your webpack.config.js

...
module: {
  rules: [
    {
      test: /.s?css$/,
      use: ExtractTextWebpack.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoader: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                ... // fill your config
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              ... // fill your config
            }
          }
        ]
      })
    }
  ]
},
plugins: [
  new ExtractTextWebpack({
    filename: 'bundle.css'
  })
]
...

This is the version of dependencies you need.

"devDependencies": {
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "beta",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.2.2",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
  }

don't forget to require your style.scss root to your entry file.

Example: in your ./dist/main.js require your sass by writingrequire('../sass/liveleverer.scss')