https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

目的：开发环境观察样式表是在行内，想着以前用 MiniCssExtractPlugin变成独立的css文件。可是发现很多问题，如下是过程。

 

用了vue cli4 自动生成项目，里面没有package.conf.js 文件

百度发现，新的里面应该用vue.conf.js，package.conf.js名字读不到。

新建一个vue.conf.js

按以前，写上

const MiniCssExtractPlugin =require('mini-css-extract-plugin');

plugins:[
            new MiniCssExtractPlugin({filename:'bulit.css'})
        ]，

module:{
            rules:[
                {
                        test:/\.css$/i,
                        use:[MiniCssExtractPlugin.loader,'vue-style-loader','css-loader']
                }
            ]
        }

结果报错，

Invalid options in vue.config.js: "plugins" is not allowed. "module" is not allowed

看了官方文档

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

css.extract 这个就是这个作用。

不用'mini-css-extract-plugin' ,改用css.extract

module.exports = {css:{extract:true}
};

可以了，css在开发环境也可以变成了独立的css文件。

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。