Javascriptとサスの間で変数を共有する方法

時々 、私たちは、あなたが使用することができ、スタイルファイルの変数を取得する必要がある: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" }
    }
  },
}
公開された25元の記事 ウォンの賞賛5 ビュー1120

おすすめ

転載: blog.csdn.net/tinfengyee/article/details/104094641
おすすめ