如何在Javascript和Sass之间共享变量

2020-01-27 19:07:57 阅读：288 来源： 互联网

标签：sass Sass color Javascript primary loader webpack export 共享

有时候我们需要获取样式文件中的变量, 可以利用:export {}可以导出需要的变量。案例是在webpack中使用。
安装

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

配置

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

使用

element-variables.scss

$--color-primary: #008ad3;
$--color-success: #67c23a;
$--color-danger: #f56c6c;
$--color-warning: #e6a23c;
$--color-info: #909399;

:export {
    color-primary: $--color-primary
}

About.vue

export default {
  name: 'About',
  data() {
    return {
      
    }
  },
  methods: {
    getStyle() {
      console.log(styles);// { color-primary: "#008ad3" }
    }
  },
}

tinfengyee 发布了25 篇原创文章 · 获赞 5 · 访问量 1126 私信关注

标签：sass,Sass,color,Javascript,primary,loader,webpack,export,共享
来源： https://blog.csdn.net/tinfengyee/article/details/104094641

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何在Javascript和Sass之间共享变量