Home > Software engineering >  Setting up includepaths for node-sass in webpack config
Setting up includepaths for node-sass in webpack config

Time:09-27

Include paths not working when added to webpack config(or I am doing it wrong). I've tired two different methods.

I get the following error:

SassError: Can't find stylesheet to import.
  ╷
1 │ @import "config.scss";
  │         ^^^^^^^^^^^^
  ╵

src/home/myfile.scss

@import "config.scss";
...

src/assets/sass/config.scss

$config_value: 3;
...

/webpack.config.js

module.exports = {
    plugins: [
       ...plugins
    ],
    entry: {
        'styles.min': glob.sync("./src/**/*.scss"),
        'scripts.min': glob.sync("./src/**/*.js"),
    },
    output: {
        path: __dirname   `/dist/`,
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use:[
                   ...loaders
                    // Compiles Sass to CSS
                    {
                        loader: "sass-loader",
                        options: {
                          sassOptions: {
                            includePaths: [
                                "./src/assets/sass/", 
                                path.resolve(__dirname, "src/assets/sass")
                            ],
                          },
                        },
                      },
                    ]


CodePudding user response:

Looks like you pointed out the wrong path. Based on what you've given in above 3 files are under /src dir which means the path under sass options is supposed to be ./assets/sass/:

{
  loader: "sass-loader",
  options: {
    sassOptions: {
      includePaths: [
        "./assests/sass/", 
      ],
    },
  },
}

CodePudding user response:

Looks like you have a typo. "src/assests/sass" should be src/assets/sass

options: {
    sassOptions: {
      includePaths: [
          "./src/assets/sass/"
      ],
    },
},

  • Related