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`内联样式

1 个答案: