Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
7a6ee960
authored
2020-06-02 13:40:47 +0800
by
sunnie
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
sass
1 parent
556eb3e4
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
65 additions
and
35 deletions
README.md
src/views/home/about.vue
README.md
View file @
7a6ee96
...
...
@@ -269,7 +269,21 @@ Vue.use(Tabbar).use(TabbarItem)
首先 你可能会遇到
`node-sass`
安装不成功,别放弃多试几次!!!
目录结构,在
`src/assets/css/`
文件夹下包含了三个文件
每个页面自己对应的样式都写在自己的 .vue 文件之中
`scoped`
它顾名思义给 css 加了一个域的概念。
```
html
<style
lang=
"scss"
>
/* global styles */
</style>
<style
lang=
"scss"
scoped
>
/* local styles */
</style>
```
#### 目录结构
vue-h5-template 所有全局样式都在
`@/src/assets/css`
目录下设置
```
bash
├── assets
...
...
@@ -279,45 +293,56 @@ Vue.use(Tabbar).use(TabbarItem)
│ │ └── variables.scss
# 全局变量
```
每个页面自己对应的样式都写在自己的 .vue 文件之中
#### 自定义 vant-ui 样式
```
html
<style
lang=
"scss"
>
/* global styles */
</style>
现在我们来说说怎么重写
`vant-ui`
样式。由于
`vant-ui`
的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加
`scoped`
,但你又想只覆盖这个页面的
`vant`
样式,你就可在它的父级加一个
`class`
,用命名空间来解决问题。
<style
lang=
"scss"
scoped
>
/* local styles */
```
css
.about-container
{
/* 你的命名空间 */
.van-button
{
/* vant-ui 元素*/
margin-right
:
0px
;
}
}
```
#### 父组件改变子组件样式 深度选择器
当你子组件使用了
`scoped`
但在父组件又想修改子组件的样式可以 通过
`>>>`
来实现:
```
css
<
style
scoped
>
.a
>>>
.b
{
/* ... */
}
</
style
>
```
#### 全局变量
`vue.config.js`
配置
注入
`sass`
的
`mixin`
`variables`
到全局,不需要手动引入 ,配置
`$cdn`
通过变量形式引入 cdn 地址
`vue.config.js`
配置
使用
`css.loaderOptions`
选项,注入
`sass`
的
`mixin`
`variables`
到全局,不需要手动引入 ,配置
`$cdn`
通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:
```
javascript
const
IS_PROD
=
[
'production'
,
'prod'
].
includes
(
process
.
env
.
NODE_ENV
)
const
defaultSettings
=
require
(
'./src/config/index.js'
)
module
.
exports
=
{
css
:
{
extract
:
IS_PROD
,
sourceMap
:
false
,
loaderOptions
:
{
scss
:
{
// 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData
:
`
@import "assets/css/mixin.scss";
@import "assets/css/variables.scss";
$cdn: "
${
defaultSettings
.
$cdn
}
";
`
}
}
}
css
:
{
extract
:
IS_PROD
,
sourceMap
:
false
,
loaderOptions
:
{
// 给 scss-loader 传递选项
scss
:
{
// 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData
:
`
@import "assets/css/mixin.scss";
@import "assets/css/variables.scss";
$cdn: "
${
defaultSettings
.
$cdn
}
";
`
,
},
},
},
}
```
在
`main.js`
中引用全局样式(发现在上面的,prependData 里设置
`@import "assets/css/index.scss";`
并没有应用全局样式这里在
main.js 引入)
设置 js 中可以访问
`$cdn`
,
`.vue`
文件中使用
`this.$cdn`
访问
```
javascript
...
...
@@ -326,7 +351,7 @@ import '@/assets/css/index.scss'
// 设置 js中可以访问 $cdn
// 引入cdn
import
{
$cdn
}
from
'@/config'
import
{
$cdn
}
from
'@/config'
Vue
.
prototype
.
$cdn
=
$cdn
```
...
...
@@ -334,14 +359,14 @@ Vue.prototype.$cdn = $cdn
```
html
<script>
console
.
log
(
this
.
$cdn
)
console
.
log
(
this
.
$cdn
)
</script>
<style
lang=
"scss"
scoped
>
.logo
{
width
:
120px
;
height
:
120px
;
background
:
url($cdn+'/weapp/logo.png')
center
/
contain
no-repeat
;
}
.logo
{
width
:
120px
;
height
:
120px
;
background
:
url($cdn+'/weapp/logo.png')
center
/
contain
no-repeat
;
}
</style>
```
...
...
src/views/home/about.vue
View file @
7a6ee96
...
...
@@ -59,8 +59,9 @@ export default {
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
>
.about-container
{
/* 你的命名空间 */
background
:
#fff
;
height
:
100vh
;
box-sizing
:
border-box
;
...
...
@@ -87,6 +88,10 @@ export default {
a
{
text-decoration
:
underline
;
}
.van-button
{
/* vant-ui 元素*/
background
:
#ff5500
;
}
}
.logo
{
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment