色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue cli 全局scss

錢斌斌2年前7瀏覽0評論

Vue CLI是一個腳手架工具,可以幫助我們快速的創建一個基于Vue的項目。在使用Vue CLI創建項目時,我們可以選擇使用全局的Scss變量,這樣可以方便地統一管理項目中的Scss風格。

全局Scss指的是一個Scss文件,它包含了所有的Scss變量、函數、Mixins等,這樣在項目中我們就可以方便地引用這些變量,統一樣式,提高項目的可維護性。

在Vue CLI中,我們可以通過在項目中增加一個新的Scss文件來實現使用全局Scss。具體操作如下:

//在項目的src目錄下新建一個global.scss文件
//編寫global.scss文件,定義全局Scss
$primary-color: #1890ff; //定義主色調
//在vue.config.js文件中引入global.scss文件
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "@/global.scss";`
}
}
}
}

以上操作完成后,我們就可以在項目中使用全局Scss變量了。

在Vue組件中使用全局Scss變量的方式和使用普通Scss樣式一樣,只需要在樣式中使用$符號引入即可。

//在Vue組件中引用全局Scss變量

除了使用全局的Scss變量,Vue CLI還支持在組件中使用Scss模塊的方式定義樣式。

在組件中使用Scss模塊的方式是通過在樣式中使用:local修飾符,這樣樣式就只在當前組件中生效了,不會影響其他組件。

//在Vue組件中引用Scss模塊

在使用Scss模塊時,我們可以通過$符號在組件中定義局部變量,這些變量只在當前組件中生效,不會影響其他組件。

//在Vue組件中使用局部變量

總之,Vue CLI提供了豐富的Scss支持,無論是使用全局Scss還是Scss模塊,都可以方便地實現統一的Scss風格,提高項目的可維護性。