在Typescript & Javascript 中使用Sass变量

星宇大前端

发布于 2021-02-22 14:28:56

3.1K0

发布于 2021-02-22 14:28:56

文章被收录于专栏：大宇笔记大宇笔记

在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:

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

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

export interface I_globalScss {
  primaryColor: string;
  accentColor: string;
  textColor: string;
}

export const styles: I_globalScss;

export default styles;

然后可以 import styles from 'yourFileName.scss';使用。

参考： https://mattferderer.com/use-sass-variables-in-typescript-and-javascript

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css