在Typescript & Javascript 中使用Sass变量

在Vue中我们往往会单独抽取css全局变量，除了在页面css中使用，往往属性也会用到。

准备

默认安装了：

• TypeScript
• Sass

如果没有安装可自行安装。

wepack 配置：

module.exports = {
  //...
    module: {
        rules: [
            //...
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
};

导出使用

1.导出

可以通过 :export 进行导出，如下面sass 文件：

$textColor: #333;
$primaryColor: #0F0;
$secondaryColor: #F0F;
// Here's the export you add.
:export {
  textColor: $textColor;
  primaryColor: $primaryColor;
  secondaryColor: $secondaryColor;
}

使用

JavaScript:

可以直接使用 import styles from 'yourFileName.scss';

Typescript:

需要一个类型声明，两种方式可以创建。

1. 在webpack cssloader 中添加 typings-for-css-modules-loader. 插件会自动定义类型。
2. 手动创建TS声明文件，创建一个 yourFileName.scss.d.ts 文件，内容如下：

export interface I_globalScss {
  primaryColor: string;
  accentColor: string;
  textColor: string;
export const styles: I_globalScss;