sass
Showing
2 changed files
with
65 additions
and
35 deletions
... | @@ -269,7 +269,21 @@ Vue.use(Tabbar).use(TabbarItem) | ... | @@ -269,7 +269,21 @@ Vue.use(Tabbar).use(TabbarItem) |
269 | 269 | ||
270 | 首先 你可能会遇到 `node-sass` 安装不成功,别放弃多试几次!!! | 270 | 首先 你可能会遇到 `node-sass` 安装不成功,别放弃多试几次!!! |
271 | 271 | ||
272 | 目录结构,在 `src/assets/css/`文件夹下包含了三个文件 | 272 | 每个页面自己对应的样式都写在自己的 .vue 文件之中 `scoped` 它顾名思义给 css 加了一个域的概念。 |
273 | |||
274 | ```html | ||
275 | <style lang="scss"> | ||
276 | /* global styles */ | ||
277 | </style> | ||
278 | |||
279 | <style lang="scss" scoped> | ||
280 | /* local styles */ | ||
281 | </style> | ||
282 | ``` | ||
283 | |||
284 | #### 目录结构 | ||
285 | |||
286 | vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 | ||
273 | 287 | ||
274 | ```bash | 288 | ```bash |
275 | ├── assets | 289 | ├── assets |
... | @@ -279,45 +293,56 @@ Vue.use(Tabbar).use(TabbarItem) | ... | @@ -279,45 +293,56 @@ Vue.use(Tabbar).use(TabbarItem) |
279 | │ │ └── variables.scss # 全局变量 | 293 | │ │ └── variables.scss # 全局变量 |
280 | ``` | 294 | ``` |
281 | 295 | ||
282 | 每个页面自己对应的样式都写在自己的 .vue 文件之中 | 296 | #### 自定义 vant-ui 样式 |
283 | 297 | ||
284 | ```html | 298 | 现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。 |
285 | <style lang="scss"> | ||
286 | /* global styles */ | ||
287 | </style> | ||
288 | 299 | ||
289 | <style lang="scss" scoped> | 300 | ```css |
290 | /* local styles */ | 301 | .about-container { |
302 | /* 你的命名空间 */ | ||
303 | .van-button { | ||
304 | /* vant-ui 元素*/ | ||
305 | margin-right: 0px; | ||
306 | } | ||
307 | } | ||
308 | ``` | ||
309 | |||
310 | #### 父组件改变子组件样式 深度选择器 | ||
311 | |||
312 | 当你子组件使用了 `scoped` 但在父组件又想修改子组件的样式可以 通过 `>>>` 来实现: | ||
313 | |||
314 | ```css | ||
315 | <style scoped> | ||
316 | .a >>> .b { /* ... */ } | ||
291 | </style> | 317 | </style> |
292 | ``` | 318 | ``` |
319 | #### 全局变量 | ||
293 | 320 | ||
294 | `vue.config.js` 配置注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址 | 321 | `vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量: |
295 | 322 | ||
296 | ```javascript | 323 | ```javascript |
297 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) | 324 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) |
298 | const defaultSettings = require('./src/config/index.js') | 325 | const defaultSettings = require('./src/config/index.js') |
299 | module.exports = { | 326 | module.exports = { |
300 | css: { | 327 | css: { |
301 | extract: IS_PROD, | 328 | extract: IS_PROD, |
302 | sourceMap: false, | 329 | sourceMap: false, |
303 | loaderOptions: { | 330 | loaderOptions: { |
304 | scss: { | 331 | // 给 scss-loader 传递选项 |
305 | // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn | 332 | scss: { |
306 | // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders | 333 | // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn |
307 | prependData: ` | 334 | // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders |
308 | @import "assets/css/mixin.scss"; | 335 | prependData: ` |
309 | @import "assets/css/variables.scss"; | 336 | @import "assets/css/mixin.scss"; |
310 | $cdn: "${defaultSettings.$cdn}"; | 337 | @import "assets/css/variables.scss"; |
311 | ` | 338 | $cdn: "${defaultSettings.$cdn}"; |
312 | } | 339 | `, |
313 | } | 340 | }, |
314 | } | 341 | }, |
342 | }, | ||
315 | } | 343 | } |
316 | ``` | 344 | ``` |
317 | 345 | ||
318 | 在 `main.js` 中引用全局样式(发现在上面的,prependData 里设置`@import "assets/css/index.scss";`并没有应用全局样式这里在 | ||
319 | main.js 引入) | ||
320 | |||
321 | 设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问 | 346 | 设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问 |
322 | 347 | ||
323 | ```javascript | 348 | ```javascript |
... | @@ -326,7 +351,7 @@ import '@/assets/css/index.scss' | ... | @@ -326,7 +351,7 @@ import '@/assets/css/index.scss' |
326 | 351 | ||
327 | // 设置 js中可以访问 $cdn | 352 | // 设置 js中可以访问 $cdn |
328 | // 引入cdn | 353 | // 引入cdn |
329 | import {$cdn} from '@/config' | 354 | import { $cdn } from '@/config' |
330 | Vue.prototype.$cdn = $cdn | 355 | Vue.prototype.$cdn = $cdn |
331 | ``` | 356 | ``` |
332 | 357 | ||
... | @@ -334,14 +359,14 @@ Vue.prototype.$cdn = $cdn | ... | @@ -334,14 +359,14 @@ Vue.prototype.$cdn = $cdn |
334 | 359 | ||
335 | ```html | 360 | ```html |
336 | <script> | 361 | <script> |
337 | console.log(this.$cdn) | 362 | console.log(this.$cdn) |
338 | </script> | 363 | </script> |
339 | <style lang="scss" scoped> | 364 | <style lang="scss" scoped> |
340 | .logo { | 365 | .logo { |
341 | width: 120px; | 366 | width: 120px; |
342 | height: 120px; | 367 | height: 120px; |
343 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; | 368 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; |
344 | } | 369 | } |
345 | </style> | 370 | </style> |
346 | ``` | 371 | ``` |
347 | 372 | ... | ... |
... | @@ -59,8 +59,9 @@ export default { | ... | @@ -59,8 +59,9 @@ export default { |
59 | } | 59 | } |
60 | } | 60 | } |
61 | </script> | 61 | </script> |
62 | <style lang="scss" scoped> | 62 | <style lang="scss"> |
63 | .about-container { | 63 | .about-container { |
64 | /* 你的命名空间 */ | ||
64 | background: #fff; | 65 | background: #fff; |
65 | height: 100vh; | 66 | height: 100vh; |
66 | box-sizing: border-box; | 67 | box-sizing: border-box; |
... | @@ -87,6 +88,10 @@ export default { | ... | @@ -87,6 +88,10 @@ export default { |
87 | a { | 88 | a { |
88 | text-decoration: underline; | 89 | text-decoration: underline; |
89 | } | 90 | } |
91 | .van-button { | ||
92 | /* vant-ui 元素*/ | ||
93 | background: #ff5500; | ||
94 | } | ||
90 | } | 95 | } |
91 | 96 | ||
92 | .logo { | 97 | .logo { | ... | ... |
-
Please register or sign in to post a comment