用于 Element 按需引入组件后引入对应的样式。
使直接修改 Element 里定义的主题 scss 变量后能直接在开发模式直接生效。
npm i babel-plugin-elementui-demand -D
通过 .babelrc
或 babel.config.js
或者 babel-loader 配置
/babel.config.js
module.exports = {
"plugins": [
[
"elementui-demand",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk",
"ext": ".scss", // 此处指明加载的样式文件后缀为 scss
"isElementUI": true // 指明为加载 element-ui 的样式
}
]
]
}
/vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
// 加载 scss 文件前会引入的 scss 文件(此文件不要使用样式,仅用于存储变量及其他不会生成 css 文件的内容)
// (此处就是用于修改 element-ui 的样式变量。( src/assets 下新建一个 element-variables.scss 文件)
// 文件内容可参见:https://github.com/ElementUI/theme-chalk/blob/master/src/common/var.scss
prependData: `@import "~@/assets/element-variables.scss";`
}
}
}
}
/src/assets/element-variables.scss
// 改变变量后立即生效
/* 改变主题色变量 */
$--color-primary: #f00;
/src/main.js
// 将要使用的组件,增加到 main.js 或者其他地方
import { Button } from 'element-ui'
Vue.use(Button)
插件会将下面的
import { Button } from 'components'
转换为
var button = require('components/lib/button')
require('components/lib/button/style.css')
插件会将下面的
import Components from 'components'
import { Button } from 'components'
转换为
require('components/lib/styleLibraryName/index.css')
var button = require('components/lib/styleLibraryName/button.css')
通过 .babelrc
或者 babel-loader 配置
{
"plugins": [["component", options]]
}
{
"plugins": [xxx,
["component", {
libraryName: "antd",
style: true,
}, "antd"],
["component", {
libraryName: "test-module",
style: true,
}, "test-module"]
]
}
- lib // 'libDir'
- index.js // or custom 'root' relative path
- style.css // or custom 'style' relative path
- componentA
- index.js
- style.css
- componentB
- index.js
- style.css
- lib
- theme-default // 'styleLibraryName'
- base.css // required
- index.css // required
- componentA.css
- componentB.css
- theme-material
- ...
- componentA
- index.js
- componentB
- index.js
或者
- lib
- theme-custom // 'styleLibrary.name'
- base.css // if styleLibrary.base true
- index.css // required
- componentA.css // default
- componentB.css
- theme-material
- componentA
-index.css // styleLibrary.path [module]/index.css
- componentB
-index.css
- componentA
- index.js
- componentB
- index.js
-
["component"]
: 导入 js 的模块 -
["component", { "libraryName": "component" }]
: 模块名称 -
["component", { "styleLibraryName": "theme_package" }]
: 样式模块名称 -
["component", { "styleLibraryName": "~independent_theme_package" }]
: 导入独立的主题包 -
["component", { "styleLibrary": {} }]
: 导入具有更多配置的独立主题包styleLibrary: { "name": "xxx", // 与 styleLibraryName 相同 "base": true, // 如果主题包中有 base.css 文件 "path": "[module]/index.css", // the style path. e.g. module Alert => alert/index.css "mixin": true // 如果主题包中找不到 css 文件,则使用 [libraryName] 的 css 文件 }
-
["component", { "style": true }]
: 从 'style.css' 中导入 js 和 css -
["component", { "style": cssFilePath }]
: 从文件路径(filePath)导入 style css -
["component", { "libDir": "lib" }]
: lib 目录 -
["component", { "root": "index" }]
: 主文件目录 -
["component", { "camel2Dash": false }]
: 是否将名称解析为破折号模式,默认为true