We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
index.jsx ` import './a.css'
export default function Home() { return (
a.css
b.css
.a { width: 13.333333vw; height: 13.333333vw; background-color: red; } b.css .b { width: 13.333333vw; height: 13.333333vw; background-color: blue; }
.a { width: 13.333333vw; height: 13.333333vw; background-color: red; }
.b { width: 13.333333vw; height: 13.333333vw; background-color: blue; }
b.css没有转换vw
.b { width: 100px; height: 100px; background-color: blue; }
` 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
The text was updated successfully, but these errors were encountered:
No branches or pull requests
在不使用“craco-plugin-scoped-css”的情况
index.jsx
`
import './a.css'
export default function Home() {
return (
)
}
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
截图
The text was updated successfully, but these errors were encountered: