scss全域性混入配置（引用）
阿新 • • 發佈：2020-12-14
在main.js和app.vue中引入混入後，並不能直接在全域性使用
要使混入全域性宣告，可以在vue.config.js中配置（方法2實證可行）
a.方法1
如果使用的是vue-cli的版本是比較低的版本，我們可以通過使用 sass-resources-loader這個外掛，修改vue-cli的目錄下build/utils.js 。從而實現scss檔案的共享。
步驟1：首先安裝sass-resources-loader這個外掛。
| 1 |
npm i sass-resources-loader --save-dev
|
步驟2：修改build資料夾下的utils.js檔案,找到return選項，修改它的scss屬性進行入下配置，其他不用改變。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
//修改這個scss屬性
scss: generateLoaders('sass').concat({
loader:'sass-resources-loader',
options:{ resources:[
path.resolve(__dirname,'../src/assets/variable.scss'),
path.resolve(__dirname,'../src/assets/mixin.scss'),
path.resolve(__dirname,'../src/assets/base.scss')
]
}
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
|
步驟3：測試階段，新建一個Test.vue元件，進行入下配置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template>
<div>
<!-- test類的預設樣式 -->
<div class="test">
test
</div>
<div class="box2">
ssss
</div>
</div>
</template>
<style lang="scss">
.test{
//訪問公共的scss變數
font-size:$tsize;
background: $bg;
}
.box2{
//訪問公共的scss混入
@include wh($w2,$h2)
}
</style>
|
b.方法2
如果使用的vue-cli的版本是高版本的，那麼可以直接修改vue.config.js這個檔案的css.loaderOptions選項，就可以讓每個元件使用公用的scss檔案了。
步驟1：同樣首先安裝sass-resources-loader這個外掛。
| 1 |
npm i sass-resources-loader --save-dev
|
步驟2：在專案主目錄下新建一個vue.config.js配置檔案。大概的配置參考這篇文章
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const path=require('path')
module.exports={
publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
assetsDir:'assets',
indexPath:'myIndex.html',
filenameHashing:false,
productionSourceMap: false,
css: {
loaderOptions: {
sass: {
//依次匯入的公用的scss變數，公用的scss混入，共用的預設樣式
prependData: `
@import "./src/assets/css/variable.scss";
@import "./src/assets/css/mixin.scss";
@import "./src/assets/css/base.scss";
`
}
}
}
}
|
步驟3：測試階段，和方法一的步驟3一樣。
c.方法3
如果使用的vue-cli的版本是高版本的，那麼可以直接修改vue.config.js這個檔案的chainWebpack這個屬性來實現多個scss檔案的公用。
步驟1：同樣首先安裝sass-resources-loader這個外掛。
| 1 |
npm i sass-resources-loader --save-dev
|
步驟2：在專案主目錄下新建一個vue.config.js配置檔案。大概的配置參考這篇文章
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const path=require('path')
module.exports={
publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
assetsDir:'assets',
indexPath:'myIndex.html',
filenameHashing:false,
productionSourceMap: false,
chainWebpack:config=>{
const types=['vue']
types.forEach(type=>{
config.module.rule('scss').oneOf(type).use('style-resource')
.loader('style-resources-loader')
.options({
patterns:[
//公用的scss變數
path.resolve(__dirname,'./src/assets/css/variable.scss'),
//公用的scss混入
path.resolve(__dirname,'./src/assets/css/mixin.scss'),
//共用的預設樣式
path.resolve(__dirname,'./src/assets/css/base.scss')
]
})
})
}
}
|
引用自https://www.jb51.net/article/175576.htm