有时候我们需要获取样式文件中的变量, 可以利用: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" }
}
},
}