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

我有一个项目设置,我使用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'
})

解决方法

我能够通过重写我的大部分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,publicPath: '/assets/js/'
    },devtool: 'source-map',module: {
      loaders: [
        {
          test: /\.js$/,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)
}

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

解决方法

猜你在找的CSS相关文章