看看我的react应用程序,我使用ant设计,normalize和其他一些CSS库来轻松地创建组件和使用预定义的样式。但是由于某些原因,我的webpack配置不能正确地将这些压缩到一个主要的CSS文件中。而是添加<head></head>
之间的所有样式。http://take.ms/7a4o2
我的webpack可以在这里找到: gist.github.com/martinsoender/dd978c9defc298889454b0035e2389cb
发布于 2018-07-14 03:28:35
发布于 2018-07-16 03:45:09
要压缩/缩小css,请使用optimize-css-assets-webpack-plugin。
在您的配置中,由于style-loader,所有样式都添加到<head>
中,通过在ExtractTextPlugin
中将其设置为回退,名为bundle.css
的css文件应该可以正确输出。
如果你使用的是Webpack 3,这个配置应该可以工作(我在下面的代码片段中添加了两个注释):
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index'
],
output: {
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
localIdentName: '[path][name]--[local]'
}
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
})
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery'
}),
new OptimizeCSSAssetsPlugin({ // minify css
cssProcessorOptions: { // enable css external source maps output, you must set devtool: 'source-map'
map: {
inline: false,
annotation: true
}
}
})
]
};
https://stackoverflow.com/questions/51330624
复制相似问题