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里面以减少请求。