Question: How do I use sass-loader?

[eluchsinger]

I am trying out neutrino and I have the requirement to use SASS (or SCSS). I can't get it to work. Only the App.css gets compiled and the styles.sass is ignored. I have also tried to add an include path in the sass-loader options. I don't get any error messages.

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "neutrino build",
    "start": "neutrino start",
    "lint": "neutrino lint",
    "test": "neutrino test"
  },
  "dependencies": {
    "@neutrinojs/style-loader": "^8.1.2",
    "node-sass": "^4.7.2",
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-hot-loader": "^4.0.0"
  },
  "devDependencies": {
    "@neutrinojs/airbnb": "^8.1.2",
    "@neutrinojs/jest": "^8.1.2",
    "@neutrinojs/react": "^8.1.2",
    "neutrino": "^8.1.2",
    "neutrino-middleware-sass": "^0.0.1",
    "node-sass-chokidar": "^1.2.0",
    "sass-loader": "^6.0.7"
  }
}

[eliperelman]

The react preset already comes with style-loader, so maybe it's possible there is a conflict going on here somewhere. Could you change your .neutrinorc.js to the following and try it?

module.exports = {
  use: [
    '@neutrinojs/airbnb',
    ['@neutrinojs/react', {
      html: {
        title: 'test'
      },
      style: {
        loaders: [
          { loader: 'sass-loader', useId: 'sass' }
        ]
      }
    }]
  ]
};

If that doesn't work, also try using require.resolve:

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

Let us know!

[eluchsinger]

I tried both, but the styles.sass file didn't get compiled.

module.exports = {
  use: [
    '@neutrinojs/airbnb',
    ['@neutrinojs/react', {
      html: {
        title: 'test'
      },
      style: {
        loaders: [
          { loader: require.resolve('sass-loader'), useId: 'sass' }
        ]
      }
    }]
  ]
};

[eliperelman]

@timkelty Am I missing something here?

[timkelty]

@eliperelman @eluchsinger You need to tell style-loader to process .sass files with the test/modulesTest options (by default it only handles .css files)

module.exports = {
  use: [
    '@neutrinojs/airbnb',
    ['@neutrinojs/react', {
      html: {
        title: 'test'
      },
      style: {
        test: /\.sass$/,
        modulesTest: /\.module\.sass$/,
        loaders: [
          { loader: require.resolve('sass-loader'), useId: 'sass' }
        ]
      }
    }]
  ]
};

[edmorley]

@eluchsinger did the approach above work for you?

If so, it would be great to add a Saas example to the docs, since this came up in #803 too.

[eluchsinger]

@edmorley I think it worked, but in the end I didn't use this tool at all (therefore, I can't re-check again).

[eliperelman]

Also came up in #871.