elementui sass

在Element UI中使用Sass

Element UI支持通过Sass变量定制主题。要使用Sass，需安装Sass预处理器和Sass-loader。

安装依赖：

npm install sass sass-loader --save-dev

定制主题变量

在项目中创建Sass文件（如element-variables.scss）覆盖默认变量：

$--color-primary: #409EFF; // 修改主题色
$--font-path: '~element-ui/lib/theme-chalk/fonts'; // 字体路径需保留
@import "~element-ui/packages/theme-chalk/src/index";

在Vue项目中引入

在入口文件（如main.js）中引入Sass文件而非CSS：

import './element-variables.scss';
import ElementUI from 'element-ui';

按需引入优化

配合babel-plugin-component实现按需加载时，修改.babelrc配置：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

编译问题处理

若遇到Sass版本兼容问题，可锁定版本：

npm install sass@1.26.11 sass-loader@10.1.1 --save-dev

全局变量共享

在Vue CLI项目中，通过vue.config.js共享Sass变量：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }
};