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

希望对你有所帮助~~~~