常規(guī)步驟
1. 創(chuàng)建項目
使用vue cli 腳手架工具創(chuàng)建項目
vue create xxxx
2. 創(chuàng)建全局樣式文件
全局樣式變量
路徑：@/assets/styles/variables.scss
//flex 布局變量
$--flex-direction: ("row", "column");
$--flex-position: ("start", "center", "end");
布局樣式類
路徑：@/assets/styles/layout.scss
@each $direction in $--flex-direction {
.flex-#{$direction} {
display: flex;
flex-direction: #{$direction};
}
@each $p1 in $--flex-position {
@each $p2 in $--flex-position {
.flex-#{$direction}-#{$p1}-#{$p2} {
display: flex;
flex-direction: #{$direction};
@if $p1!=center {
justify-content: flex-#{$p1};
} @else {
justify-content: #{$p1};
}
@if $p2!=center {
align-items: flex-#{$p2};
} @else {
align-items: #{$p2};
}
}
}
}
}
3. 創(chuàng)建全局公用樣式文件
全局共用樣式
路徑：@/assets/styles/main.scss
@import "@/assets/styles/layout.scss";
div {
@extend .flex-row;
}
4. 引入全局公用樣式
在App.vue或者main.js中映入均可
<template>
<router-view />
</template>
<style lang="scss">
@import "@/assets/styles/main.scss";
body {
margin: 0;
padding: 0;
border: none;
outline: none;
}
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: 微軟雅黑;
color: #000000;
}
</style>
5. 配置全局樣式類文件
在vue.config.js中配置全局樣式類，具體配置方法可以參考vue cli官方文檔
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
scss: {
additionalData: `@import "~@/assets/styles/variables.scss","~@/assets/styles/layout.scss";`
}
}
}
});
FAQ
1. 樣式被多次重復編譯
原因
-
產生的原因是因為在
vue.config.js中通過@import指令導入了SCSS樣式文件`,并且在vue組件庫內或者全局樣式內再次引入，導致樣式類被多次重復編譯 -
vue.config.js是vue編譯的入口文件，所以vue在編譯時會先加載vue.config.js內配置的SCSS文件,而通過@import指令導入的文件，scss-loader會在編譯后將已經編譯的全局樣式變量、樣式類、帶入到后續(xù)scss文件的編譯中
解決方法
- 去掉多余的引用文件
例如以下代碼，在main.scss中引入了layout.scss文件，而layout.scss文件已經在vue.config.js中配置了載入，所以這里無需再引入
@import "@/assets/styles/layout.scss";
div {
@extend .flex-row;
}
- 使用
@use指令導入文件，避免文件被多次編譯
@use "@/assets/styles/layout.scss" as *;
div {
@extend .flex-row;
}
- 在
vue.config.js中只配置工具性樣式文件，如果全局變量文件、全局樣式類文件；不要引入非工具性樣式文件，例如全局組件樣式、main.scss等。所以同理在App.vue文件中只引入非工具性樣式文件，因為如果在App.vue文件中引入工具性樣式文件是不生效的，因為vue項目中，只有在vue.config.js中配置的樣式文件，才會被編譯到每個vue組件樣式內
如以下代碼，同樣會產生多次重復編譯
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
scss: {
additionalData: `@import "~@/assets/styles/main.scss";`
}
}
}
});
2. 樣式類、變量名找不到
文章來源：http://www.zghlxwxcb.cn/news/detail-796873.html
原因
- 原因1：
scss-loader在編譯scss時，是根據從上到下，從前到后的順序編譯，如果文件內的類名不在scss-loader的堆棧內時，就會拋出以上錯誤 - 原因2：
@use導入的文件只對當前文件上下文有效，不會成為全局屬性
解決方法
- 原因1：檢查引入scss文件的順序是否正確
例如如下代碼：當
variables.scss文件位于layout.scss文件后時，在編譯layout.scss時就會拋出變量不存在錯誤，因為此時scss-loader的堆棧中沒有對應的變量文章來源地址http://www.zghlxwxcb.cn/news/detail-796873.html
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
scss: {
additionalData: `@import "~@/assets/styles/layout.scss","~@/assets/styles/variables.scss";`
}
}
}
});
- 原因2：
- 如果報錯位置是在scss文件中：需要檢查對應的文件是否被引入，如果沒有引入，需要引入對應的文件
- 如果報錯位置是在vue組件內，需要查看vue.config.js的配置中是否引入了對應的文件
3. @use rules must be written before any other rules.
原因
- 原因1：
被引用文件內存在使用@use指令導入，而引用文件通過@import指令導入被引用文件；因為@use指令不能和其他指令混合 - 原因2：
@use指令寫在了@import指令后
解決方法
- 問題1：所以在引用文件內使用
@use ‘xxxxx’ as *作為導入語法
@use '~@/xxx/xxx' as *;
- 問題2：所有的
@use指令必須放在最前面
@use '~@/xxx/xxx' as *;
@import '~@/xxx/xx';
4. Private members can’t be accessed from outside their modules.
原因
- 問題產生原因是，當使用
@use導入文件后，因為被應用文件在聲明變量或方法時在方法時，在變量名或方法名前添加了-或者_，導致變量或方法成為了當前模塊 的私有變量或私有方法 - 通過
@use方法導入的文件，都會被sass認為是一個單獨的模塊，每個模塊之間是相互獨立的，所以要想使用某個模塊屬性，就必須是非私有屬性，這也就是為什么，@use可以避免樣式被重復編譯，因為每個模塊只會編譯一次
解決方法
- 去掉非私有屬性前的
-和_
到了這里，關于vue中引入sass、scss的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
