无法使用“sass-loader”内联样式

Question

我有一个项目设置，我使用 ExtractTextPlugin 创建一个 CSS 文件。我正在尝试使用 style-loader、css-loader 和 sass-loader.

创建一个开发 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'
})

Answer 1

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

这是我的新 dev-only 配置：

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

无法使用“sass-loader”内联样式

Unable to inline styles with `sass-loader`

css

webpack

webpack-style-loader

sass-loader

css-loader