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