首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Webpack配置未压缩所有css库

Webpack配置未压缩所有css库
EN

Stack Overflow用户
提问于 2018-07-14 02:02:42
回答 2查看 398关注 0票数 0

看看我的react应用程序,我使用ant设计,normalize和其他一些CSS库来轻松地创建组件和使用预定义的样式。但是由于某些原因,我的webpack配置不能正确地将这些压缩到一个主要的CSS文件中。而是添加<head></head>之间的所有样式。http://take.ms/7a4o2

我的webpack可以在这里找到: gist.github.com/martinsoender/dd978c9defc298889454b0035e2389cb

EN

回答 2

Stack Overflow用户

发布于 2018-07-14 03:28:35

这取决于您的配置,许多配置使用style-loader1和css-loader。

css-loader将.css作为支持的扩展添加到输出文件中。样式加载器注入到样式元素中。类似地,您可能有一个css-in-js或类似的工具。

样式加载器通常用于开发,而另一个用于文本/css的合并/组合加载器用于生产构建。YMMV.

0

1

票数 1
EN

Stack Overflow用户

发布于 2018-07-16 03:45:09

要压缩/缩小css,请使用optimize-css-assets-webpack-plugin

在您的配置中,由于style-loader,所有样式都添加到<head>中,通过在ExtractTextPlugin中将其设置为回退,名为bundle.css的css文件应该可以正确输出。

如果你使用的是Webpack 3,这个配置应该可以工作(我在下面的代码片段中添加了两个注释):

代码语言:javascript
复制
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
        }
      }
    })
  ]
};
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51330624

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档