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

♀尐吖头ヾ 提交于 2019-11-29 10:48:41

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!

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')

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!