2

Say I have something like:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader', 'sass-loader']
}

in my webpack config and I have a app/ sub folder with all my SCSS and JS files in.

Currently to import an SCSS partial I have to @import 'app/whatever/my_partial'; for it to be recognised.

How can I set the loader to treat app/ as a resource root for these files so I can just say @import 'whatever/my_partial' ?

This is with Webpack 2.x btw.

Any help from you clever people much appreciated!

BaronVonKaneHoffen
  • 1,902
  • 1
  • 21
  • 29

1 Answers1

4

You can add app/ to the includePaths option in the sass-loader. Your .scss rules has to be changed to:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(process.cwd(), 'app')]
      }
    }
  ]
}
BaronVonKaneHoffen
  • 1,902
  • 1
  • 21
  • 29
Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
  • Awesome! Thanks for that! Had to alter this slightly so the path line read `includePaths: [path.resolve(process.cwd(), 'app')]` (just errored out otherwise) , but after that it's working great. (updated your answer - hope you don't mind) – BaronVonKaneHoffen Apr 22 '17 at 21:31