Style loader for sass / scss does not work

[YahngSungho]

In my opinion, I've tried all the methods I've found to use the sass / scss loader. But it did not work in the end.

Someone please check...

I created an example repo:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help_style_loader

I installed:
https://www.npmjs.com/package/neutrino-middleware-sass
https://www.npmjs.com/package/neutrino-preset-sass

My neutrino.js:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/blob/help_style_loader/.neutrinorc.js

What I tried:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/blob/help_style_loader/src/components/style-loader-test.story.js

What I saw:

[edmorley]

Hi!

Both of those packages are third-party and don't look actively maintained. For example neutrino-preset-sass has a peer dependency on the fairly old Neutrino 4:
https://github.com/kopacki/neutrino-dev/blob/15aba74502c88176eeb3ccb2a9073ae570f55be8/packages/neutrino-preset-sass/package.json#L21

Similarly, neutrino-middleware-sass has a peer dependency on Neutrino 6:
https://github.com/markelog/neutrino-middleware-sass/blob/a5826373417b9163fd8a7e1ac069365e4a4f2689/package.json#L28

Generally when the peer dependency versions do not match, it's not guaranteed that things will work. As such, it's worth watching the npm/yarn install log, since they will warn about version mismatches like this :-)

Thankfully for Neutrino 8, @neutrinojs/style-loader (which is used by the web/react/... presets) now supports passing in custom loaders directly, without the need for additional presets. There is an example of how to do this in the docs:
https://neutrinojs.org/packages/style-loader/#custom-loaders

Could you try removing the third party presets and following the steps in the Neutrino docs, and let us know how you get on?

[edmorley]

eg:

module.exports = {
  use: [
    ['@neutrinojs/react', {
      // These options get passed down to `@neutrinojs/style-loader`
      style: {
        // ...
      }
    }]
  ]
};

[YahngSungho]

Thank you for your reply. I removed those two third-parties and tried again. But it still did not work.

My neutrino.js was:

[
      '@neutrinojs/react',
      {
        html: {
          title: 'App'
        }
        ,
        style: {
          test: /\.(css|sass|scss)$/,
          moduleTest: /\.module\.(css|sass|scss)$/,
          loaders: [
            { loader: require.resolve('sass-loader'), useId: 'sass' },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [require('autoprefixer')]
              }
            }

          ]
        }

      }
    ]

In addition to this, the way I've tried is shown in my neutrino.js.

https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/blob/help_style_loader/.neutrinorc.js

[edmorley]

I've checked out the repository linked above (very useful to have it - thank you!). I had to modify the .neutrinorc.js slightly to get it to work, since Neutrino was looking for src/index.js that didn't exist on that branch (I used the mains option to point at the component directly instead).

There appears to be three separate issues:

1. The neutrino-preset-emotion preset is listed before the main "build" preset (@neutrino/react), which causes TypeError: Cannot read property 'plugins' of undefined. Since it modifies the compile rule, it needs to be moved after the react preset.

2. After fixing that, I got:

./src/components/sassFile.sass
Module build failed: ModuleBuildError: Module build failed:
.styleTest1 {
  background-color: firebrick;
}
            ^
      Invalid CSS after ".styleTest1 {": expected "}", was "{"
      in C:\Users\Ed\src\dfsfdsfsfdsfwfsd\src\components\sassFile.sass (line 1, column 14)

Looking at the SASS docs, it seems that sassFile.sass is using the wrong syntax (SCSS instead of SASS), which is why it's giving that error message. Either rename the file to .scss or leave as .sass and remove the brackets and semicolon - ie: change to this for it to be valid SASS markup:

.styleTest1
  background-color: firebrick

3. Not sure if this issue affected you, but I spotted that our example in the docs had the order for sass-loader and postcss-loader inverted compared to what the postcss-loader docs say:

You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

I'll open a PR to fix the docs for (3).

[YahngSungho]

@edmorley Thank you for your detailed and kind answers.
I think I've done everything you asked me to do(Except that I did not add index.js. Instead I used storybook).

But nevertheless this doesn't work. The same error message still appears.

Could you check it one more time? The part I changed can be found in the repo:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help_style_loader

Especially in neutrino.js:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/blob/help_style_loader/.neutrinorc.js

[YahngSungho]

I've not solved this problem yet. Does anyone know how to solve it, please?

[edmorley]

Sorry for the delayed reply - I've been focusing on the Neutrino 9 release (beta in #1129).

Trying the testcase branch now, trying to run yarn start, I get:
Error: Cannot find module 'sass-loader'

I had to install that dependency manually using yarn add sass-loader.

After that, I then get:
Module not found: Error: Can't resolve 'C:\Users\Ed\src\dfsfdsfsfdsfwfsd\src\index' ....

Which is due to the bug in the testcase mentioned here:
#1066 (comment)

Manually adding a mains entry to .neutrinorc.js like so:

module.exports = {
  options: {
    mains: {
      index: './components/style-loader-test.story.js',
    },
  },
  use: [
    // ...
  ]
};

...I then get this error:
Module build failed: Error: Cannot find module 'node-sass'

This is because sass-loader requires node-sass to work:
https://github.com/webpack-contrib/sass-loader#install
(though for various reasons doesn't include it in peerDeps, hence no earlier warning; see webpack-contrib/sass-loader#533)

Installing the missing dependency using yarn add node-sass and trying again, I get:

$ yarn start
yarn run v1.12.0
$ neutrino start
√ Development server running on: http://localhost:5000
√ Build completed

In case it was actually yarn build that was broken instead (the error screenshot above didn't show which command was running...):

$ yarn build
yarn run v1.12.0
$ neutrino build
√ Building project completed
Hash: 37bf1b8d3ca06902ee36
Version: webpack 3.12.0
Time: 12495ms
                                     Asset       Size        Chunks                    Chunk Names
             index.405572d723e2efbb7da7.js     260 kB         index  [emitted]  [big]  index
           runtime.a9edc78d5cd6127c9851.js  810 bytes       runtime  [emitted]         runtime
index.dd8751b90232c1efe3423e5dc045dce1.css   63 bytes  index, index  [emitted]         index, index
                                index.html  495 bytes                [emitted]
Done in 18.05s.

ie: I can't reproduce this issue.

Could you try again and if it still occurs for you, update the testcase so it reproduces the problem? The testcase also needs to be working out of the box (no fixes/adding missing dependencies should be required after cloning).

One thing I did spot though (that is unrelated to the error above), when inspecting the generated config (using yarn start --inspect-new), was that the modules CSS regex was incorrect:

      /* neutrino.config.module.rule('style-modules') */
      {
        test: /\.(module.css)$/,

This is because there is a typo in .neutrinorc.js -- moduleTest should be modulesTest.

[arthur-zheng]

@edmorley I appreciate your answers. Saved me tons of time.