Unable to inline styles with `sass-loader`

Question

I have a project setup where I use ExtractTextPlugin to create a CSS file. I'm trying to create a dev Webpack config with the styles injected onto the page using style-loader, css-loader, and sass-loader.

As far as I am aware the default behaviour is to inject the styles into a <style /> tag and I've removed all traces of ExtractTextPlugin but it still doesn't want to inject the styles.

Does anybody know what might cause the styles to be lost? My Webpack config is below.

Config:

const webpack = require('webpack')

module.exports = config => Object.assign({}, {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: 'bundle.js.map'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
}, config)

Called with:

module.exports = require('../../dev')({
  name: 'Onboarding',
  entry: './src/apps/components/Onboarding/index.js'
})

Antilogism

What is your objective? Having the CSS in side the build or as a separate file ? – Phono

Inside the bundle. I already have it working it separate files but it's too slow for development – Antilogism

What is slow in your development? – Phono

Build times are slow – Antilogism

Did you check this issue ? github.com/webpack/webpack/issues/3329 – Bracketing

Answer 1

I was able to get it working by rewriting most of my Webpack config. I had already tried the css-loader options below, so I'm not sure why they worked now but not before.

This is my new dev-only config:

const webpack = require('webpack')
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = config => {
  const { out, libraryTarget, name = 'main' } = config
  const filename = `${name}.js`

  delete config.out

  return Object.assign({}, {
    output: {
      path: path.resolve(__dirname, '../../../' + out),
      filename,
      libraryTarget,
      publicPath: '/assets/js/'
    },
    devtool: 'source-map',
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              query: {
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]_[local]_[hash:base64:5]'
              }
            },
            'sass-loader']
        }
      ]
    },
    plugins: [
      new HTMLWebpackPlugin({
        title: 'App Name',
        filename: '../../index.html',
        template: './test-lambda/template-dev.html',
        inject: 'body'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.SourceMapDevToolPlugin({
        filename: `${filename}.map`
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development')
      })
    ]
  }, config)
}

Antilogism