<转载> VUE项目中CSS管理

vue的scoped

在vue项目中，当 .vue文件中 <style> 标签有 *scoped 属性时，它的 CSS 只作用于当前组件中的元素，很好的实现了样式私有化的目的。

使用scoped之后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响，如果希望父组件样式影响子组件，可以使用 >>>操作符:

1 2 3

<style scoped> .a >>> .b { /* ... */ } </style>

sass变量和mixin

一般情况scss中的变量和mixin的作用域仅限于当前文件，每次在vue文件中引用公共变量或者mixin的时候，都需要先将mixin.scss import进来。当我们有很多个vue组件的时候，这是一件非常非常麻烦的事情。

这个时候我们就需要用到sass-resources-loader了，它会在webpack打包过程中帮助我们将全局scss文件import到每个Vue组件中，举个例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

module: { rules: { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: 'vue-style-loader!css-loader', scss: [ 'vue-style-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, './src/modules/scss/mixin.scss') } } ] } } } }

如果我们需要在其它scss文件中使用：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, './src/modules/scss/mixin.scss') } } ] }] }

需要注意的是， sass-resources-loader会将common.scss注入每个vue组件中。为避免重复打包，不要在common.scss写具体的CSS方法。

webpack打包优化

如果希望将项目中css抽离出来单独打包缓存，需要用到webpack的插件extract-text-webpack-plugin，下面是官方vue-loader文档中的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin")   module.exports = { // other options... module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装 }) } } } ] }, plugins: [ new ExtractTextPlugin("style.css") ] }

这样就可以将vue组件里面的css单独打包出来。

如果是移动端的项目，可以选择使用html-webpack-inline-source-plugin把CSS内联到html里面以减少请求。