如何让scss变量可以当作js变量来使用

如何让scss变量可以当作js变量来使用

当前咱们使用scss变量有两个痛点：

1. 须要手动导入
2. 没法与js创建联系或者很难，后续不能在此基础上作一些骚操做

为了解决这两个问题，咱们以建立js文件以json格式定义scss变量，而后经过配置webpack的解析规则来达到即能像普通scss同样使用，又能做为js变量使用的目的。

scss变量使用规范

变量建立

全部scss变量在style/variables.scss.js编写，格式要求为：

1. 只容许使用小写字母
2. 单词间如下划线"_"链接
3. 命名应简洁易懂，以一个大的模块或高级别的单词开头_后面跟功能描述单词结尾

const variables = {
  'header_height': '60px',
  'header_background': `#ededed`
}

module.exports = variables;

注意：命名如下划线链接是为了在js文件中可以单个import, 使用中已经在webpack进行转换，必须按照此格式！
在scss变量中使用是正常的scss变量：$header-height
在js中使用是定义时的变量格式：import { header_height } from "@/style/variables.scss.js";

变量使用

配置webpack中sass解析方式，通常来讲项目构建者已经处理完毕，项目成员无需关心。
使用时无需引入，直接在样式文件中正常使用便可。

scss中使用示例

.the-nav{
  height: $header-height;
}

js中使用示例

import { header_height } from "@/style/variables.scss.js";

...
data(){
  return {
    header_height: header_height
  }
}
...

配置讲解

vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: Object.keys(scssVariables)
          .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
          .join('\n')
      }
    }
  }
};

注意：此处有个坑，新版本的sass-loader更换了api参数prependData可是彷佛没有文档说明

老版本的sass-loader vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: Object.keys(scssVariables)
          .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
          .join('\n')
      }
    }
  }
};

老版本data => 新版本 prependData

webpack.config.js中 vuecli2

let scssVariables = require('./src/style/variables.scss.js');

...
{
  test: /\.scss$/,
  use: [
    'css-loader',
    'postcss-loader',
    {
      loader: 'sass-loader',
      options: {
        data: Object.keys(scssVariables)
          .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
          .join('\n')
      }
    }
  ]
}
...

通过一番姿式，到这里已经能够成功解锁新世界啦~~~~

用优雅的姿式掉头发~ 哦不码代码~

GitHub 欢迎交友