7a6ee960 by sunnie

sass

1 parent 556eb3e4
...@@ -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 {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!