这是一款可以自动生成css样式的插件,你只需要在 vue中写入 class="w10",或者 react 中 className="w10", 就会自动生成width: 10px;

默认单位为px,如果你需要使用%

请添加如 class="w10p",则会生成 width: 10%

默认生成路径为 /src/assets/css/happycss.css (请确保已经存在css目录)

默认导出路径为 /src/main.js (非该目录,请配置 importPath)

最重要的,插件不影响px2rem使用!!!

This is a plugin that can automatically generate CSS style. You only need to write class= "w10" in vue, and it will automatically generate width: 10px;

The default unit is px, if you need to use%

If you add class= "w10p", you will generate width: 10%

The default generation path is/src/assets/css/happycss.css (make sure that the CSS directory already exists)

The default export path is / src/main.js. (If not this directory, configure importPath)

Most importantly, this plugin do not affect the use of px2rem!!!

a webpack loader for css

Downloads

npm install happycss

or

yarn add happycss

const happycss = require('happycss')

module.exports = {
 // ...
 plugins: [
 new happycss({
 // cssPath: '/src/assets/css/happycss.css'
 // importPath: '/src/main.js'
 }),
 ]
}

const happycss = require('happycss')

module.exports = {
 // ...
 configureWebpack: {
 plugins: [
 new happycss({
 // cssPath: '/src/assets/css/happycss.css'
 // importPath: '/src/main.js'
 })
 ]
 }
}

1.请勿对生成文件happycss.css文件进行添加操作,因为每次编译,都会生成全新的文件。

2.import 生成路径,默认为系统路径,可手动移至文件顶部。反感路径太长,可配置autoImport 为false后,手动引入css文件

• Support color

• 增加对color的支持

• Support react

• 增加对react的支持 (外部文件新增样式,需要刷新页面)

• compatible webpack 3.04円.0

• 兼容webpack 3.0和4.0

• Increase support for crossing'-','_'in class class names

• 增加对class类名中 横行'-' 、 '_'的支持

• Support Webpack 4.0

• 只支持webpack 4.0

• auto create happycss.css file

• 自动生成 happycss.css 文件

MIT