工具写好后发布,然后安装工具(项目使用less,scss都可以使用它生成element-ui主题) npm i ele-theme-tool -D 安装成功后执行以下命令进行初始化 执行前请确保 element-ui 主题色没有被定制过,如果定制过重新安装 element-theme-chalk 再执行 如果当前根目录下已经存在element-variables.scss先删除再执行 node_modules...
sassScript 最普遍用法就是变量,变量以美元符号开头,赋值方法与 css 属性的写法一样 ,直接使用即调用变量 。 $width:5em; #main{ width:$width; } 1. 2. 3. 4. 5. 变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局...
可以看到这个配置可以修改加载样式文件的目录,我们按element-ui的scss文件目录进行配置 [ "component", { "libraryName": "element-ui", "styleLibrary": { "name": "~node_modules/element-ui/packages/theme-chalk/src", // element-ui的scss目录 "base": true, // if theme package has a base.css "...
_theme.scss代码如下: // === 公共变量定义 start === // 常用字体大小 $font-size-small: 12px; $font-size-base: 14px; $font-size-large: 16px; // === 公共变量定义 end === // === 混合样式定义 start === // 文字颜色 @mixin text_color{ // 蓝色主题 [data-theme="blue"] & ...
element-custom.scss是覆盖样式文件。 // element-custom.scss @import'../element-variables';//自定义的覆盖变量// Icon font path, required$--font-path:'fonts';//字体的相对路径// Element UI 的官方样式库@import'~element-ui/packages/theme-chalk/src/index'; ...
需求是:在vue项目初始化前,拿到当前url中的color参数的值,作为elementUI的主题色,达到换肤的效果。(color参数是去掉#的十六进制颜色值) 那么根据官网的提供的方式,创建element-variables.scss,通过改变$--color-primary变量的形式可以达到切换主题色的效果,所以我现在的思路是: ...
// demo.scss #sidebar { width: 30%; background-color: #faa; } 1. 2. 3. 4. 5. 二、使用sass 1. 安装:直接在vs code编译器安装使用扩展插件---easy sass 打开settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项...
这将创建一个element-variables.scss文件,你可以在其中修改Element UI的默认变量。 编译主题 在element-variables.scss文件中修改变量: @button-primary-bg-color: #409EFF; 然后编译主题: et 引入编译后的主题 在main.js中引入编译后的CSS文件: import './path-to-your-theme/index.css'; ...
npm i https://github.com/ElementUI/theme-chalk -D 4、初始化变量文件 et-i// 默认的文件是element-variables.scss,也可以自定义文件名 et --init [file path] 安装成功以后,在项目里会自动生成一个element-variables.scss 文件,如下图: 里面定义的是所有的颜色变量 ...