APP 這個(gè)方法目前又報(bào)錯(cuò)
寫文章時(shí)候用的是
HBuilderX 2.9.8相關(guān)聯(lián)的版本
因?yàn)閁niApp中不支持Sass 中的 exprot:
$theme-text-color-colorful:#EE5002; //這是一個(gè)變量名
//主要的一步：
:export {
theme_color: $theme-text-color-colorful;
}
import styles from 'scss文件路徑名';
data(){
return{
textColor:styles.theme_color
}
}
這樣的方式再h5中可以使用，但是很可惜再小程序等地方不能使用恕酸，所以只能找其他辦法了榕栏。
之前再弄前端的時(shí)候畔勤，記得是可以通過(guò)修改webpack的sass options來(lái)注入js的變量的
為什么要注入js的變量不是scss文件的變量，因?yàn)檫@樣可以再js代碼中復(fù)用
原型是這樣的
variables.js:
module.exports = {
'primary-color': 'red',
'space-v-lg': '1px'
}
僅需要在 webpack.config.js 中更改下配置：
let styleVariables = require('./variables.js')
// 其他配置
...
{
test: /\.scss$/,
use: [
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
data: Object.keys(styleVariables)
.map(k => `\$${k}: ${styleVariables[k]};`)
.join('\n')
}
}
]
},
所以跟著這個(gè)思路扒磁，找到了 vue-cli-plugin-uni 的 代碼查看了一下怎么寫的庆揪，因?yàn)樽约簩?duì) webpack-chain不是很熟悉，所以走了不少?gòu)澛?/p>
具體代碼路徑： node_modules/@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js
直接上配置：
同理妨托，先新建 變量文件 scss.js:
module.exports = {
'cooliean-color': 'purple',
'error-color': 'red',
}
uniapp cli項(xiàng)目中 新建 vue.config.js 然后輸入下面代碼
let styleVariables = require('./scss.js') // 路徑自己修改
function appScssVar(oldVarString) {
const newData = Object.keys(styleVariables)
.map(k => `\$${k}: ${styleVariables[k]};`)
.join('\n')
// 添加樣式到全局缸榛，這樣不用每個(gè)頁(yè)面import了
oldVarString = oldVarString + '\n' + '@import \"@/path/style/themes/index.scss\";';
if (!newData) {
return oldVarString
}
return oldVarString + '\n' + newData
}
module.exports = {
chainWebpack: webpackConfig => {
const cssTypes = ['vue-modules', 'vue', 'normal-modules', 'normal']
cssTypes.forEach(type => {
webpackConfig.module.rule('scss').oneOf(type).use('sass-loader').tap(options => {
if (!options.sassOptions) {
options.sassOptions = {}
}
options.prependData = appScssVar(options.prependData)
return options
})
webpackConfig.module.rule('sass').oneOf(type).use('sass-loader').tap(options => {
if (!options.sassOptions) {
options.sassOptions = {}
}
options.prependData = appScssVar(options.prependData)
return options
})
})
}
}
然后就可以直接再uniapp中的vue中調(diào)用這個(gè)變量了
<template>
<view>
<!-- <text :style="`color: ${coolieanColor}`">這個(gè)要報(bào)錯(cuò)</text>-->
<text :style="{color: coolieanColor}">coolieanColor</text>
<text :style="{color: errorColor}">errorColor</text>
</view>
</template>
<script>
import scssVars from '@/style/scss.js'
export default {
data() {
console.log(scssVars)
return {
coolieanColor: scssVars['cooliean-color'], // 這個(gè)中劃線標(biāo)準(zhǔn)不是很爽 ：）
errorColor: scssVars['error-color'], // 這個(gè)中劃線標(biāo)準(zhǔn)不是很爽 ：）
}
}
}
</script>
<style lang="scss">
.cooliean-class{
color: $cooliean-color;
}
.error-class{
color: $error-color;
}
</style>
還有一種直接引入 scss變量的方法： 這個(gè)方法我自己本人并么有實(shí)踐過(guò)，但是前段項(xiàng)目這樣應(yīng)該是沒(méi)有問(wèn)題的兰伤，請(qǐng)自己驗(yàn)證
這個(gè)方法不能再js中獲取變量
直接引入 @important "@/styles/global.scss"
要添加依賴sass-resources-loader
// vue.config.js
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources（這里是你.scss文件所在路徑）
resources: './path/to/resources.scss',
// Or array of paths（這個(gè)可以刪掉 和上面這個(gè) 二選一 二選一 二選一）
resources: ['./path/to/vars.scss', './path/to/mixins.scss']
})
.end()
})
}
}
參考資料：
- https://blog.csdn.net/weixin_44003190/article/details/90610382
- https://www.cnblogs.com/fayin/p/10363924.html
希望對(duì)你有所幫助~~~~
