样式文件 线上打包的时候被丢掉了

[cleverboy32]

Version

3.2.1

Environment info

mac

Steps to reproduce

vue.config.js 中的把 css 配置成可提取了

css: {
        extract: true,
        modules: false
    }

在 development 下运行是可以 提取出我 vue 中的 less 样式的 但是当我 build 的时候， 我的 vue 中的样式全都丢掉了。 我builde 的时候设置 NODE_ENV='development' 样式也是存在的。

What is expected?

所以样式被提取出来

What is actually happening?

vue 中的样式被丢失

---

测试环境下，我能有组件包样式，自己写的页面样式两个文件， 线上打包后的样式文件只剩下了引入的组件包的样式文件

[haoqunjiang]

1. 请确认依赖都已经更新到最新
2. 请提供复现代码

[cleverboy32]

我的配置

var path = require('path');

const resolve = dir => path.join(__dirname, dir);

const isProd = process.env.NODE_ENV === 'production';

const ImageminPlugin = require('imagemin-webpack-plugin').default;
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    baseUrl: './',
    css: {
        extract: true,
        modules: false
    },
    devServer: {
        overlay: {
            warnings: true,
            errors: true
        }
    },
    configureWebpack: {
        devtool: isProd ? false : 'source-map',
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src'),
                'sob-ui': '@souche-ui/sob-ui',
                'som-ui': '@souche-ui/som-ui',
                'tower': '@souche-f2e/tower'
            }
        },
        // output: {
        //     filename: '[name].bundle.js'
        // },
        plugins: [
            new ImageminPlugin({
                disable: !isProd,
                pngquant: {
                    quality: '95-100'
                }
            })
        ],
        externals: {
            'echarts': 'echarts'
        }
    },
    chainWebpack: (config) => {
        config.optimization.sideEffects(false)
        config.module
            .rule('images')
            .test(/\.(png|jpg|gif)$/i)
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 10240 }))
            .end();
    }

};

我的 样式写在 vue 文件里面的。 测试环境下 我的 css 代码能被分离出来，能看到有三个css 文件，但是 production 环境css 文件被丢了。 后来对比配置，发现是 sideEffects 影响的。 我配置了 config.optimization.sideEffects(false) 文件不会被丢失。不清楚这个插件原理。 - -

[haoqunjiang]

https://vue-loader.vuejs.org/zh/guide/ 这个页面的末尾

警告 如果你在开发一个库或多项目仓库 (monorepo)，请注意导入 CSS 是具有副作用的。请确保在 package.json 中移除 "sideEffects": false，否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。

config.optimization.sideEffects(false) 会让 webpack 停止识别 package.json 中的 sideEffects 字段所以有用。

[StringKe]

我遇到了这个问题 使用了 antd 的组件库，自己写的 都在 antd已引入了，但是没有打包在一起 配置了 config.optimization.sideEffects(false) 也没有用

目前我的配置

const isProduction = process.env.NODE_ENV !== 'development';
module.exports = {
  publicPath: isProduction ? '././' : '/',
  parallel: false,
  productionSourceMap: false,
  css: {
    // extract: false,
    sourceMap: false,
    requireModuleExtension: false,
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        globalVars: {
          appClassName: 'designApp',
        },
      },
    },
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [],
    },
  },
  chainWebpack: (config) => {
    config.optimization.sideEffects(false);
  },
};