gaoxiaoliangz/react-scoped-css

在使用postcss-px-to-viewport插件,css中import的文件不会转换为vw

Opened this issue · 0 comments

在不使用“craco-plugin-scoped-css”的情况

index.jsx
`
import './a.css'

export default function Home() {
return (


aaa

bbb


)
}
a.css@import url('./b.css');
.a{
width: 100px;
height: 100px;
background-color: red;
}
b.css
.b{
width: 100px;
height: 100px;
background-color: blue;
}
`
编译结果
a.css

.a { width: 13.333333vw; height: 13.333333vw; background-color: red; }
b.css
.b { width: 13.333333vw; height: 13.333333vw; background-color: blue; }

使用craco-plugin-scoped-css出现的问题

b.css没有转换vw

.b { width: 100px; height: 100px; background-color: blue; }

craco.config.js

`
const path = require("path");
const cracoScopedCss = require("craco-plugin-scoped-css");
const pxtovw = require("postcss-px-to-viewport");
const my_pxtovw = pxtovw({
//这里是设计稿宽度 自己修改
unitToConvert: "px", // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
});
const antdMobile_pxtovw = pxtovw({
viewportWidth: 750,
viewportUnit: "vw",
include: [/node_modules/antd-mobile/],
});
module.exports = {
devServer: {
port: 3001,
host: "0.0.0.0",
open: false,
},
webpack: {
alias: {
"@": path.join(__dirname, "src"),
},
},
plugins: [
{
plugin: cracoScopedCss,
},
],
style: {
postcss: {
loaderOptions: {
postcssOptions: {
ident: "postcss",
plugins: [my_pxtovw, antdMobile_pxtovw],
},
},
},
},
};

`

package.json

截图

js截图

jsx截图

a截图
b截图
编译结果A
编译结果B