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

<转载> VUE项目中CSS管理的更多相关文章

  1. 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...

  2. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  3. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  4. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  5. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  6. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  7. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  8. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  9. Vue项目使用CSS变量实现主题化

    主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件.现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了.最近,使用C ...

随机推荐

  1. java压缩流

    java压缩流是为了减少传输时的数据量,可以将文件压缩成ZIP.JAR.GZIP等文件格式.

  2. hdu 1025LIS思路同1257 二分求LIS

    题目: Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...

  3. PHP手册-函数参考-日期与时间相关扩展

    一.Calander.日期/时间.HRTime扩展的对比   Calendar 日期/时间 HRTime 简介 历法扩展集包括了一系列用于在不同历法间进行转换的函数,它是以Julian Day计数为中 ...

  4. Hive QL的实例

    1.创建电影评分表 create table film_table ( userid int, movieid int, rating int, unixtime string ) row forma ...

  5. 一、J2EE

    一.HTTP协议中的响应代码 响应代码从1xx--5xx一共有41中.常见的 404:表示访问的页面不存在.这表示一个浏览器的错误,就是服务端没有提供这个服务,你却去访问.这个锅要算在浏览器头上,而不 ...

  6. php 循环数组问题

    $a = array('abe','ben','cam'); //foreach遍历数组时,实际上是遍历的数组的一个拷贝,并且在开始遍历之前会把指针指向拷贝的开始:,根据cow机制,写时,重新复制一份 ...

  7. provider和consumer配置参数的优先级

    <dubbo:service>和<dubbo:reference>存在一些相同的参数,例如:timeout,retries等,那么哪个配置的优先级高呢? consumer合并u ...

  8. Python学习之路【第三篇】--集合

    语法结构: set1.issubset(set2)判断集合set1是否为set2的子集,返回布尔值. ? 1 2 3 4 5 6 s1 = {'Java', 'PHP', 'Python', 'C++ ...

  9. 【转】Netty之解决TCP粘包拆包(自定义协议)

    1.什么是粘包/拆包 一般所谓的TCP粘包是在一次接收数据不能完全地体现一个完整的消息数据.TCP通讯为何存在粘包呢?主要原因是TCP是以流的方式来处理数据,再加上网络上MTU的往往小于在应用处理的消 ...

  10. LaTeX技巧10:LaTeX数学公式输入初级入门

    LaTeX最强大的功能就是显示美丽的数学公式,下面我们来看这些公式是怎么实现的. 1.数学公式的前后要加上 $ 或 \( 和 \),比如:$f(x) = 3x + 7$ 和 \(f(x) = 3x + ...