如何单独打包css文件

html-css038

如何单独打包css文件,第1张

css打包成一个方法：

webpack.config.js配置如下

var ExtractTextPlugin = require("extract-text-webpack-plugin")//extract-text-webpack-plugin安装此插件

module:{

loaders:[

{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}

]

},

plugins:[

new ExtractTextPlugin("css/[name].css")//则会生成一个css文件

]

比如你的js文件中这样引入即可：

import './css/lib/bootstrap.min.css'

import './css/test.css'

因为antd不同组件可能会引入相同less文件会产生引入顺序问题。设置忽略顺序为true。

参考:

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250

在本地运行样式没问题，打包后到测试环境，就出现问题，可以看到加载的css顺序变化了。统一修改某个class,本地为A覆盖了B，打包后可能为B覆盖了A。查找了很多文章都说是加载css顺序不一样导致的，的确如此。往往是在某个组件中，没有用scoped,导致污染了全局的样式。

我的项目是因为之前多人开发，不严谨导致，css到处乱引用产生的错误。具体原因为在main.js引入了element的样式，然后到单独的组件中，又引入了一遍。

将所有组件中引入的（因为通过@import引入或者import引入，作用域是全局）面向全局的样式，都删掉，然后统一在main.js中引入。这样全局的顺序都在main.js 中确定，另外不要重复引用。

本地和测试的样式一样。不再受打包后的影响。这个时候，再针对某些污染的样式在scoped中具体修改，如果对于element弹窗类的，需要脱离scoped，那就写成公共样式在main.js中引入。

定一个规则，公共样式中main.js引入，单独的都写在scoped里面，如果单独都里面在分为公共的，可以通过以下方式引入。

我很奇怪为什么本地没问题，打包后有问题。打包加载的顺序按理是从上到下的。难道是加载具体都vue页面的时候，顺序不一样吗？待验证。