APP 这个方法目前又报错
写文章时候用的是
HBuilderX 2.9.8相关联的版本
因为UniApp中不支持Sass 中的 exprot:
$theme-text-color-colorful:#EE5002; //这是一个变量名
//主要的一步：
:export {
theme_color: $theme-text-color-colorful;
}
import styles from 'scss文件路径名';
data(){
return{
textColor:styles.theme_color
}
}
这样的方式再h5中可以使用，但是很可惜再小程序等地方不能使用，所以只能找其他办法了。
之前再弄前端的时候，记得是可以通过修改webpack的sass options来注入js的变量的
为什么要注入js的变量不是scss文件的变量，因为这样可以再js代码中复用
原型是这样的
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')
}
}
]
},
所以跟着这个思路，找到了 vue-cli-plugin-uni 的 代码查看了一下怎么写的，因为自己对 webpack-chain不是很熟悉，所以走了不少弯路
具体代码路径： node_modules/@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js
直接上配置：
同理，先新建 变量文件 scss.js:
module.exports = {
'cooliean-color': 'purple',
'error-color': 'red',
}
uniapp cli项目中 新建 vue.config.js 然后输入下面代码
let styleVariables = require('./scss.js') // 路径自己修改
function appScssVar(oldVarString) {
const newData = Object.keys(styleVariables)
.map(k => `\$${k}: ${styleVariables[k]};`)
.join('\n')
// 添加样式到全局，这样不用每个页面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中调用这个变量了
<template>
<view>
<!-- <text :style="`color: ${coolieanColor}`">这个要报错</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'], // 这个中划线标准不是很爽 ：）
errorColor: scssVars['error-color'], // 这个中划线标准不是很爽 ：）
}
}
}
</script>
<style lang="scss">
.cooliean-class{
color: $cooliean-color;
}
.error-class{
color: $error-color;
}
</style>
还有一种直接引入 scss变量的方法： 这个方法我自己本人并么有实践过，但是前段项目这样应该是没有问题的，请自己验证
这个方法不能再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（这个可以删掉 和上面这个 二选一 二选一 二选一）
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
希望对你有所帮助~~~~
