vue sass 全局引用

全局引用scss

在使用的過程中,我們有一些固有的顏色字體等等,需要整個網頁都統一的,所以
需要放在全局,頁面需要使用的時候直接調用即可.
當然也可以使用公共類的方式進行引入樣式
但是更加推薦scss的變量方式,這樣不管是字體還是背景,只要是同樣顏色的地方都可以直接調用改變量就能達到想要的效果
這也使得class名稱沒有那麼多,也避免了取名難的問題

引入scss

首先要先引入scss,不然無法使用

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

我的是創建項目的時候就已經添加了這個插件,所以所有的配置都有了,如果安裝了不能用,請查看相應的環境配置問題

安裝好了之後在創建 vue.config.js 文件,如果這文件在你項目的根目錄下面已經存在則不用創建

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/index.scss";`
      }
    }
  }
};

如果有報錯,不妨將 prependData,改成data試試

• 注意: import 後面是我們創建的公共scss文件的位置

scss文件

// 默認背景顏色
$defaultBgColor:#409EFF

頁面引用

<style lang="scss" scoped="scoped">
	.homePage{
		width: 100%;
		height: 100%;
		background: $defaultBgColor;
	}
</style>

此時頁面就會顯示對應的顏色

我的頁面效果是這樣的