js控制scss的变量_详解如何在Javascript和Sass之间共享变量

在环境之间共享变量是编程的圣杯。以下是在Javascript和

Sass(或CSS！)之间共享变量的方法。

随着大型单页应用程序的兴起，Javascript和CSS越来越交织在一起。通常在两个值之间复制值(例如，与React的CSSTransitionGroup一起使用的动画持续时间或将品牌颜色传递到图形库中)。但是，保持两个具有相同值的副本不可避免地导致仅更新一个副本并最终导致令人沮丧的错误。幸运的是，使用webpack和CSS模块，有更好的方法。在此博客文章中，我们将通过上述示例为共享动画持续时间，探讨如何在脚本和样式之间共享变量CSSTransitionGroup。

第一步是安装我们的依赖项：

npm install sass-loader node-sass webpack --save-dev

接下来，我们需要配置webpack以便使用，sass-loader以便我们可以从Javascript访问我们的Sass代码。

// webpack.config.js

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader', 'sass-loader']

}

]

}

}

现在开始有趣的部分。我们在Sass中定义实际的变量值，并将其导出到Javascript。CSS模块有一个名为的简洁实用程序:export。该:export指令的工作原理基本上类似于ES6的export关键字。您的Sass代码将导出一个对象&