Electron-react-boilerplate: Converting from CSS to SASS

[ceemion]

I made the switch to use SASS instead of pure CSS. The stylings work well in development, but when I package the app, Most of the styling doesn't work. I think it may have something to do with sass-loader vs css-loader. I added node-sass and sass-loader.

I have this in my webpack.config.production.js

```module: {
loaders: [
// Extract all .global.scss to style.css as is
{
test: /.global.scss$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader',
'sass-loader'
)
},

  // Pipe other styles through css modules and append to style.css
  {
    test: /^((?!\.global).)*\.scss$/,
    loader: ExtractTextPlugin.extract(
      'style-loader',
      'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
      'sass-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    )
  },

  { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
  { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
]

}```

[chentsulin]

You have a misunderstanding of how ExtractTextPlugin works. Here is the signature:

ExtractTextPlugin.extract([notExtractLoader], loader, [options])

So, you should do something like:

ExtractTextPlugin.extract(
  'style-loader',
  'css-loader!sass-loader'
);

Not

ExtractTextPlugin.extract(
  'style-loader',
  'css-loader',
  'sass-loader'
);

[ceemion]

Thanks @chentsulin that worked!

Which resources can I read to have more grasp on these webpack configuration that you'd recommend?

[cdesch]

@ceemion What does your webpack.config.development look like?