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

Question

我有一个项目设置，其中使用ExtractTextPlugin创建CSS文件。我正在尝试创建一个使用style-loader、css-loader和sass-loader注入样式到页面上的dev Webpack配置。
据我所知，默认行为是将样式注入到<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'
})

- JmJ

---

你的目标是什么？将CSS放在构建内部还是作为单独的文件？ - jordiburgos

在捆绑包内。我已经将其分开文件工作，但对于开发来说太慢了。 - JmJ

你的开发中有什么是缓慢的？ - jordiburgos

构建时间很慢。 - JmJ

你有检查过这个问题吗？https://github.com/webpack/webpack/issues/3329 - Bastien Robert

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

- JmJ