<转载> 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里面以减少请求。
<转载> VUE项目中CSS管理的更多相关文章
- 在webpack搭建的vue项目中如何管理好后台接口地址
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- Vue项目使用CSS变量实现主题化
主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件.现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了.最近,使用C ...
随机推荐
- python-day97--django-ModelForm
Model Form :直接利用你的models里的字段 应用场景: - ModelForm - 中小型应用程序(model是你自己写的) - Form - 大型应用程序 注意事项: - 1. 类 f ...
- opencv 中的mat类(非原创)
Mat最大的优势跟STL很相似,都是对内存进行动态的管理,不需要之前用户手动的管理内存,Mat这个类有两部分数据.一个是matrix header(矩阵头),这部分的大小是固定的,包含矩阵的大小,存储 ...
- 784. Letter Case Permutation C++字母大小写全排列
网址:https://leetcode.com/problems/letter-case-permutation/ basic backtracking class Solution { public ...
- 通过cassandra-cli客户端了解cassandra的内部数据结构
和cassandra数据库交互的方式有两种,一种是通过类似于cassandra-cli命令的thrift api,或者通过cassandra提供的cql(cassandra query lanugag ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- Python购物车
product_list = [ ['Iphone',5888], ['Mac Air',8000], ['XiaoMi',19.9], ['coffee',30], ['Tesla',820000] ...
- Kali安装教程(VMWare)
1.下载镜像及相关 1.1下载镜像文件 下载链接:https://www.kali.org/downloads/ 选择自己需要的版本下载,根据经验先下载种子文件(torrent)再用迅雷下载网速是最有 ...
- Spring FactoryBean应用
Spring 中有两种类型的Bean,一种是普通Bean,另一种是工厂Bean 即 FactoryBean.FactoryBean跟普通Bean不同,其返回的对象不是指定类的一个实例,而是该Facto ...
- jsp 内置对象(五)
1.Request对象 该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以 获取用户提交的信息. 当Request对象获取客户提交的汉字字符时,会出现乱码问题,必 ...
- 学习笔记-AngularJs (一)
最近对AngularJs产生了浓厚的学习兴趣,于是便搜罗所有资料,开始学习起来,也希望把学习过程记录下来. 首先学习之前,需要对AngularJs进行个大概的了解: AngularJS[1] 诞生于 ...