无法使用`sass-loader`内联样式

Question

我有一个项目设置,我用它ExtractTextPlugin来创建一个CSS文件.我试图创建使用注入到页面的样式开发的WebPack配置style-loader,css-loader和sass-loader.

据我所知,默认行为是将样式注入到<style />标记中,我删除了所有痕迹,ExtractTextPlugin但它仍然不想注入样式.

有谁知道什么可能导致样式丢失？我的Webpack配置如下.

配置:

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)

叫:

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

Answer 1

我通过重写大部分 Webpack 配置来让它工作。我已经尝试过css-loader下面的选项，所以我不确定为什么它们现在起作用但以前不起作用。

这是我新的仅开发配置：

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)
}