目錄

1、先要查看node版本????????

2、安裝對應的node-sass、sass-loader版本

2.1根據(jù)項目使用的node版本安裝對應的node-sass版本

2.2根據(jù)node-sass版本選擇兼容的sass-loader版本，不然項目無法正常運行

3、在 vue.config.js 中配置：?

4、在組件中的具體使用

1、先要查看node版本????????

node -v

2、安裝對應的node-sass、sass-loader版本

2.1根據(jù)項目使用的node版本安裝對應的node-sass版本

? ? ? ?node-sass對應版本 ：node-sass - npm

2.2根據(jù)node-sass版本選擇兼容的sass-loader版本，不然項目無法正常運行

vue項目 sass-loader和node-sass版本對應關系

在Vue項目中，sass-loader用于加載Sass/SCSS文件，而node-sass是一個庫，用于將Sass編譯成CSS。

通常，你需要確保sass-loader與node-sass的版本相互兼容。以下是一些常見的版本對應關系：

• sass-loader?版本 7 及以上通常與?node-sass?版本 4.x 系列兼容。

• sass-loader?版本 8 及以上通常與?node-sass?版本 5.x 系列兼容。

如果你的項目中使用的是sass-loader的舊版本（7 以下），則需要使用node-sass的舊版本（4.x 系列）。而如果你的項目中使用的是sass-loader的新版本（8 及以上），則需要使用node-sass的新版本（5.x 系列）。

這里我的node版本是v14.21.3所以我安裝的node-sass版本是4.14+，"sass-loader版本是^7.3.1

"node-sass": "^4.14.1",

"sass-loader": "^7.3.1"

安裝的node-sass版本：

npm install node-sass@^4.14.1 -S -D

• -D 是--save-dev 的簡寫，是項目中安裝的意思

安裝的sass-loader版本：

npm install node-sass@^7.3.1 -S -D

3、在 vue.config.js 中配置：?

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      // 不同 sass-loader 版本對應關鍵字， v8-: data   v8: prependData   v10+: additionalData
      scss: {
        data: `@import "~@/assets/scss/global.scss";`
      }
    }
  }
};

在這個例子中，@import "~@/assets//scss/global.scss";?會被包含在所有的SCSS文件中。~@?是一個別名，代表的是項目的src目錄。你需要確保在global.scss文件中定義了你想要共享的變量或mixin。文章來源地址http://www.zghlxwxcb.cn/news/detail-860201.html

4、在組件中的具體使用

$theme-white: #f40;
.theme_backgroud_color {
    background-color: $theme_white;
}

#themeConfig {
	--blm-blue-color:#2658f5;
	--header-height:85px;
	--side-nav-width:240px;
	--primary-color: #1F2022; // 主要的字體顏色
	--layout-background-color: #f4f5f5; // 布局背景顏色
	--secondary-color: #86909c; // 次一級字體顏色，例如：文章描述
	--primary-background-color: #ffffff; // 主要的背景色
	--navbar-background-color: #ffffff; // navbar組件的背景色
	--blm-color-nav-title: #515767; // navbar組件字體顏色
	--link-color: #2658f5; // 鏈接 hover 上去的顏色
	--article-title-color: #000; // 文章標題字體顏色
	--article-desc-color: #86909c; // 文章描述字體顏色
	--article-hover-bg: #fafafa; // 文章hover背景顏色
	--border-line-color: #9797971a; // 邊框顏色
	--blm-gray-3: #f7f8fa;
	--blm-brand-5-light: #eaf2ff;
	--blm-font-3: #8a919f;
	--blm-gray-1-2: rgba(228, 230, 235, 0.5);
	--btn-bg:radial-gradient(#2658f5, #4478fc)!important;
	--btn-shadow:0px 10px 10px -10px #4478fc
}
@mixin text-overflow($number: 1) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $number;
	line-clamp: $number;
	-webkit-box-orient: vertical;
}

<style lang="scss">
.wrapper {
  width: 200px;
  height: 200px;
  background-color: $theme-white;
}
</style>

到了這里，關于SCSS全局配置 vue項目(二)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！