Javascript 与 Sass 共享变量解决方案

亦凉 2022-12-01 14:07 331阅读 0赞

随着大型单页应用程序的兴起，Javascript和CSS越来越紧密地交织在一起。通常情况下，我们会在js与scss中分别维护两份变量。然而，在开发过程中有时会只更新一处而忘记维护另一份配置变量，并最终导致令人沮丧的bug。

幸运的是，有了webpack和CSS模块，就可以解决这个问题。在这篇博客文章中，我们将探讨如何在脚本和样式之间共享变量。

如果你使用的是vue-cli，可以省略以下两步

### 第一步，安装依赖 ###

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

### 第二步，配置loader ###

我们需要在webpack配置文件中添加sass-loader，这样我们就可以从Javascript访问sass代码。

// webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
          }
        ]
      }
    }

### 第三步，导出sass变量 ###

现我们在Sass中定义实际的变量值并将其导出到Javascript。CSS模块有一个叫做：export的程序。export指令的工作原理基本上与ES6的export关键字类似。Sass代码将导出一个对象，其中包含要在Javascript中使用的变量名及其关联值。这些值都以字符串的形式导出。

// styles/animation.scss
    $animation-length: 250;
    $animation-length-ms: $animation-length + 0ms;
    
    :export {
      animationMillis: $animation-length-ms;
    }
    
    .component-enter {
      ...
    
      transition: all $animation-length-ms ease-in;
    }

### 第四步，在js程序中引入scss文件 ###

现在，在Javascript中，我们只需要从样式表导入样式

// js/animation.js
    import styles from '../styles/animation.scss'
    
    ...
    
    export default {
      data() {
        return {
          animationMillis: styles.animationMillis // 这里就是我们导出的样式变量
        }
      }
    }
    
    ...

至此，你就可以实现在js和sass中共享变量了

参考：[https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass][https_www.bluematador.com_blog_how-to-share-variables-between-js-and-sass]

[https_www.bluematador.com_blog_how-to-share-variables-between-js-and-sass]: https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass