webpack打包vue项目的时候默认会把vue里的css打包到页面上。
webpack.config.js里的plugins加上以下配置
new webpack.LoaderOptionsPlugin({test:/\.vue$/,
options: {
vue: {
loaders: {
css: ExtractTextPlugin.extract({
fallback:'vue-style-loader',
use:'css-loader',
publicPath:"../"
}),
}
}
}
)
这样可以把css提取到公共style里。
发现根本不需要再配置这些了 build/webpack.base.conf.js 中注意这一行：
module：{
rules：[
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig // vueLoaderConfig
},
]
}
其实vue-cli中已经完全配置好提取CSS到单独文件了具体配置可以查看文件 build/vue-loader.conf.js 中
使用时直接在.vue 文件中@import就好了
<style>
@import './assets/css/base.css'
//
</style>
这里用link的时候 除了路径问题外 style标签下的样式也会无效，具体为什么还不清楚
