How to add sass loader?

[xxhenglyxx]

How to?

Neutrino: 8.2.2
Presets: [ jest: 8.2.2, react-components: 8.2.2, standardjs: 8.2.2, style-loader: 8.2.2 ]
Yarnpkg: 1.6.0
Node: 9.5.0
OS: OSX - High Sierra

What did I do ? Trying to setup "Hello world" app

What did I expect to happen ? "Hello World" on the screen with styling on

What actually happened, contrary to my expectations? "Hello World" did appear at first without applying sass, after importing sass from src/stylesheets/main.scss into index.jsx where "Hello World" is, the server logs:

My package.json

{
  "name": "...",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "neutrino build",
    "start": "neutrino start",
    "lint": "neutrino lint",
    "test": "neutrino test"
  },
  "devDependencies": {
    "@neutrinojs/jest": "^8.2.2",
    "@neutrinojs/react-components": "^8.2.2",
    "@neutrinojs/standardjs": "^8.2.2",
    "@neutrinojs/style-loader": "^8.2.2",
    "neutrino": "^8.2.2",
    "node-sass": "^4.8.3",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "sass-loader": "^7.0.1"
  }
}

My .neutrinorc.js

module.exports = {
  use: [
    '@neutrinojs/standardjs',
    ['@neutrinojs/react-components', {

      style: {
          test: /\.sass$/,
          modulesTest: /\.module\.sass$/,
          loaders: [{

            loader: require.resolve('sass-loader'),
            useId: 'sass'

        }]
      }

    }],
    '@neutrinojs/jest'
  ]
};

[edmorley]

Hi!

I think the issue might be the file extension in the test? The file being imported (src/stylesheets/main.scss) is .scss, whereas the .neutrinorc.js is using test: /\.sass$/.

It would be great to add a Saas example to the docs, since this came up in #755 too. Don't suppose you'd be up for opening a PR? :-)

[kirikintha]

Hi everyone, I noticed this thread, and I used the following in my .neturinorc.js

// Style Loader
 ['@neutrinojs/style-loader', {
   loaders: [{
     loader: 'sass-loader',
     useId: 'sass',
   }],
   test: /\.scss$/,
 }],

and everything worked just fine in my react components.