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