Load partials in the same way that sass does, or at least document that it does not

[crucialfelix]

We all expect that sass-loader would include partials in the exact same way that sass does. AFAICT it does not.

// does not work
@import "ns-variables";

// need to change to this
@import "./_ns-variables.scss";

    ERROR in ./~/css-loader!./sass/admin.scss
    Module not found: Error: Cannot resolve 'file' or 'directory' ./ns-variables in /Users/crucial/Sites/nestseekers/frontend/sass
     @ ./~/css-loader!./sass/admin.scss 3:10-7

So even libraries like bootstrap-sass will not compile.

https://github.com/twbs/bootstrap-sass/blob/master/assets%2Fstylesheets%2F_bootstrap.scss

It appears this is since the 1.x release https://github.com/jtangelder/sass-loader/issues/68

If webpack is now processing all of the imports then there must be some webpacky way to supply a resolver that searches uses sass import rules.

If you are not going to support sass import rules, then this needs to be clearly documented. Otherwise we are all spending many many hours being mystified.

[crucialfelix]

Actually I can see that there are tests indicating that it should work already: https://github.com/jtangelder/sass-loader/blob/e81fa62974556049fc5063c11089fb97581d9410/test%2Fscss%2Fimport-include-paths.scss

And my error message indicates that its css-loader throwing the error. Which means maybe sass-loader never ran ?

Probably I have some configuration error.

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style',
          'css',
          // 'postcss',
          'sass'
        )
      }
    ]
  },

[deini]

@crucialfelix Sorry I bring this up again, did you manage to solve this? I'm having the same issue and also using ExtractTextPlugin. What am I missing?

[jharris4]

I'm also running into this issue trying to get sass-loader to import a scss file from the loaders.css package (https://github.com/ConnorAtherton/loaders.css/blob/master/src/animations/ball-pulse.scss).

I get an error saying it cannot resolve the file or directory 'variables' because it doesn't seem to be checking for the partial '../_variables.scss' when processing the import @import '../variables';

[wzup]

Same here. Hey, when will you fix it?

[crucialfelix]

webpack sure wastes a lot of time when things go wrong.

I think this is what solved it for me. I am on webpack 2.2.0

In plugins, add a LoaderOptionsPlugin. This passes options to loaders, in this case postcss-loader and sass-loader

    new webpack.LoaderOptionsPlugin({
       options: {
         context: __dirname,
         postcss: [
           require('postcss-minify-font-values'),
           require('postcss-ordered-values'),
           require('postcss-merge-longhand'),
           require('autoprefixer'),
           require('css-mqpacker'),
           require('postcss-merge-rules')
         ].concat(minify ?
          [
            require('postcss-discard-comments'),
            require('cssnano')
          ] : []),
         sass: {
           includePaths: [
             path.resolve(__dirname, './sass/')
           ]
         }
       }
    }),

// in module: rules: [   ... ]
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',  // when there is a compile error during development
          loader: 'css-loader!postcss-loader!sass-loader' // loaders to use
        })
      },

./sass is where my .scss files are and they include things like:

@import "ns-mixins";

which resolves to

sass/_ns-mixins.scss

I think the loader issue we see isn't because it doesn't understand how the _xxx.scss works but that the cwd it is using is wrong. It is not relative to the file it is parsing.

Maybe that is a bug: path should be resolved relative to the file.

For libraries I have no advice, sorry. I have an old bootstrap copy that I have hacked to bits to reduce the size and remove unused code. So it is a local file, not a package.