Closed xmsz closed 2 years ago
这个可能需要自定义 build.plugin.js 才能做了,因为 UnoCSS 的 Webpack Plugin 导出的方式比较特殊,是 default 导出的
我给你一个示例,可以试一下:
// build.plugin.js
const UnoCSS = require('@unocss/webpack').default;
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config
.plugin('UnoCSSPlugin')
.use(UnoCSS)
.end();
});
};
// build.json
{
"plugins": ["./build.plugin.js"]
}
可以试一下,然后现在 Rax 也能比较轻松地使用 Tailwind CSS 和 WindiCSS,欢迎体验!
可以试一下,然后现在 Rax 也能比较轻松地使用 Tailwind CSS 和 WindiCSS,欢迎体验!
牛逼
const UnoCSS = require('@unocss/webpack').default;
const presetUno = require('@unocss/preset-uno').default;
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config
.plugin('UnoCSSPlugin')
.use(UnoCSS({ presets: [presetUno()] }))
.end();
});
};
但是使用的时候
<View className="ma4"></View>
没有效果 构建出来也没有 我不知道我漏了哪步
示例可能有点问题,我没有尝试,具体用法可以看下 Webpack Chain 是怎么配置 Webpack Plugin 的,按照 Webpack Chain 的方式修改 config 就可以
我看了你的代码,我理解是传参数的方式不正确,Webpack Chain 给 Webpack Plugin 传参数的时候不能直接传入 UnoCSS 里,而是要作为第二个参数,像这样:
const UnoCSS = require('@unocss/webpack').default;
const presetUno = require('@unocss/preset-uno').default;
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config
.plugin('UnoCSSPlugin')
- .use(UnoCSS({ presets: [presetUno()] }))
+ .use(UnoCSS, [{ presets: [presetUno()] }])
.end();
});
};
@wjq990112
我又尝试了一下
// build.plugin.js
const UnoCSS = require('@unocss/webpack').default;
const { presetUno } = require('@unocss/preset-uno');
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config
.plugin('UnoCSSPlugin')
.use(UnoCSS, [
{
presets: [presetUno()],
},
])
.end();
});
};
// app.tsx
import 'uno.css';
情况一:没有实时更新_virtual_uno.css文件
需要重新构建才生效
或者手动rm -rf ./node_modules/.cache
情况二:内容经常变得不正确
变成
.static{position:static;}.m374\.635{margin:93.65875rem;}.flex{display:flex;}.tab-\$\{index\}{-moz-tab-size:var(--\{index\});-o-tab-size:var(--\{index\});tab-size:var(--\{index\});}
怀疑是应该是压缩插件导致,但不确定
情况三:rpx单位没有转换
.h-100rpx {
height: 100rpx
}
最终还是rpx而不是编译后
@xmsz
情况一:这个可能是 UnoCSS Webpack Plugin 的 bug,可以反馈一下,node_modules/.cache
文件夹是 Webpack 5 的缓存文件,如果更新对应的模块没能实时更新缓存,应该是有 bug 的。
情况二:看起来像是变量没有替换成功,暂时不清楚是不是也是 UnoCSS Webpack Plugin 的 bug。
情况三:rpx 单位的处理是在 postcss-plugin-rpx2vw 中做的处理,而 UnoCSS 直接使用的 Webpack Plugin,rpx 单位并没有通过 postcss-plugin-rpx2vw 处理,因此 rpx 未被转换的情况符合预期。
情况一:我用简易webpack项目会实时更新(不过简易项目和普通vite项目都是直接注入在页面style中所以看不到_virtual_uno.css是否有变化) 不确定是不是其他配置影响
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UnoCSS = require('@unocss/webpack').default;
const { presetUno } = require('@unocss/preset-uno');
module.exports = (env, { mode = 'production' }) => {
const isDev = mode === 'development';
return {
mode,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
],
},
{
test: /\.css$/,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
plugins: [
new UnoCSS({
include: [/\.js$/],
exclude: [/node_modules/],
presets: [presetUno()],
}),
!isDev && new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
].filter(Boolean),
};
};
有点麻烦
问题三:https://github.com/unocss/unocss/issues/386 确实不会先经过postcss 很蛋疼
问题一:https://windicss.org/integrations/webpack.html 我尝试windicss也是没有实时更新 需要重新编译
然后如果用webpack插件 windicss会经过postcss 还是挺好的 如果用postcss插件则 windcss则还是需要考虑顺序问题
但都是需要重新编译才会生成
可能使用 Webpack Plugin 扫描样式并生成的这个逻辑在 rpx 的体系下都存在一点问题,试下用 WindiCSS 的 PostCSS 模式,或者 Tailwind CSS,因为 Tailwind CSS 本质是一个 postcss 插件。
如果需要关闭 Webpack 缓存,可以试下带上 --force
参数启动,关闭 Webpack 的缓存之后看下是否还存在无法实时更新的问题?
可能使用 Webpack Plugin 扫描样式并生成的这个逻辑在 rpx 的体系下都存在一点问题,试下用 WindiCSS 的 PostCSS 模式,或者 Tailwind CSS,因为 Tailwind CSS 本质是一个 postcss 插件。
我用windCSS的postCSS模式,rpx没有转换,估计是顺序问题
我看下 WindiCSS 的 PostCSS 插件是怎么实现的,这个问题应该跟插件实现有关系。
--force
rax-app start --force
我是这样写 + postcss插件 还是没有效果
理论上来说确实跟 PostCSS 插件的顺序有关系,稍等我验证一下给你一个解决方案。
// build.plugin.js
const WindiCSS = require('postcss-windicss');
const checkPostcssLoader = (config, ruleName) =>
config.module.rules.has(ruleName) && config.module.rule(ruleName).uses.has('postcss-loader');
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
const rules = ['css', 'css-module', 'css-global'];
rules.forEach((rule) => {
if (checkPostcssLoader(config, rule)) {
config.module
.rule(rule)
.use('postcss-loader')
.tap((options) => ({
...options,
postcssOptions: {
...options.postcssOptions,
plugins: [WindiCSS, ...options.postcssOptions.plugins],
},
}));
}
});
});
};
// build.plugin.js const WindiCSS = require('postcss-windicss'); const checkPostcssLoader = (config, ruleName) => config.module.rules.has(ruleName) && config.module.rule(ruleName).uses.has('postcss-loader'); module.exports = ({ onGetWebpackConfig }) => { onGetWebpackConfig((config) => { const rules = ['css', 'css-module', 'css-global']; rules.forEach((rule) => { if (checkPostcssLoader(config, rule)) { config.module .rule(rule) .use('postcss-loader') .tap((options) => ({ ...options, postcssOptions: { ...options.postcssOptions, plugins: [WindiCSS, ...options.postcssOptions.plugins], }, })); } }); }); };
我用新项目 提示"PostCSS plugin postcss-windicss requires PostCSS 8."
旧项目顺序还是不对(可能是没更新,正常应该和新项目一样的提示)
PostCSS 8 的问题有点难受,建议还是用 Tailwind CSS 吧,有 PostCSS 7 的 compat。
PostCSS 8 的问题有点难受,建议还是用 Tailwind CSS 吧,有 PostCSS 7 的 compat。
Tailwind还需要额外插件把px转成rpx
背景
ERR! CONFIG Failed to load webpack config. ERR! Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.