react 中使用stylus 配置px2rem 无效

[MicahZJ]

{
test: /.styl$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
px2rem({ remUnit: 37.5 })
],
},
},
{
loader: require.resolve('stylus-loader')
}
],
}

[xc-smile]

请问解决了吗 我是在less中无效

[MicahZJ]

请问解决了吗我是在中中无效

还没有。。。

[xc-smile]

我解决了 你把配置放到最下面试试

[shuyanzi]

const {override,addWebpackAlias,addPostcssPlugins} = require('customize-cra')
const path = require('path')

const stylus = () => (config) => {
const stylusLoader = {
test: /.styl$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
// 样式名规则配置
localIdentName: '[local]--[hash:base64:5]',
},
},
},
// .styl 20px -> 0.2rem
{
loader: 'px2rem-loader',
options: {
remUnit: 100
}
},
{
loader: 'stylus-loader',
},
],
}
const oneOf = config.module.rules.find((rule) => rule.oneOf).oneOf
oneOf.unshift(stylusLoader)
return config
}

module.exports = {
webpack: override(
addWebpackAlias({
['src']: path.resolve(__dirname, 'src'),
}),
stylus(),
// 方式一：css文件20px -> 0.2rem
addPostcssPlugins([
require("postcss-px2rem")({ remUnit: 100 })
]),
// 方式二：css文件20px -> 0.2rem
// addPostcssPlugins([require('postcss-pxtorem')({
// rootValue: 100,
// minPixelValue: 2,
// propList: ['*'],
// }),]),
)
}
@MicahZJ

[shuyanzi]

`const {
override,
addWebpackAlias,
addPostcssPlugins,
} = require('customize-cra')
const path = require('path')

const stylus = () => (config) => {
const stylusLoader = {
test: /.styl$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
// 样式名规则配置
localIdentName: '[local]--[hash:base64:5]',
},
},
},
// .styl 20px -> 0.2rem
{
loader: 'px2rem-loader',
options: {
remUnit: 100
}
},
{
loader: 'stylus-loader',
},
],
}
const oneOf = config.module.rules.find((rule) => rule.oneOf).oneOf
oneOf.unshift(stylusLoader)
return config
}

module.exports = {
webpack: override(
addWebpackAlias({
['src']: path.resolve(__dirname, 'src'),
}),
stylus(),
// 方式一：css文件20px -> 0.2rem
addPostcssPlugins([
require("postcss-px2rem")({ remUnit: 100 })
]),
// 方式二：css文件20px -> 0.2rem
// addPostcssPlugins([require('postcss-pxtorem')({
// rootValue: 100,
// minPixelValue: 2,
// propList: ['*'],
// }),]),
)
}`

[HaiYangHuX]

const {override,addWebpackAlias,addPostcssPlugins} = require('customize-cra')
const path = require('path')

const stylus = () => (config) => {
const stylusLoader = {
test: /.styl$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
// 样式名规则配置
localIdentName: '[local]--[hash:base64:5]',
},
},
},
// .styl 20px -> 0.2rem { loader: 'px2rem-loader', options: { remUnit: 100 } },
{
loader: 'stylus-loader',
},
],
}
const oneOf = config.module.rules.find((rule) => rule.oneOf).oneOf
oneOf.unshift(stylusLoader)
return config
}

module.exports = {
webpack: override(
addWebpackAlias({
['src']: path.resolve(__dirname, 'src'),
}),
stylus(),
// 方式一：css文件20px -> 0.2rem
addPostcssPlugins([ require("postcss-px2rem")({ remUnit: 100 }) ]),
// 方式二：css文件20px -> 0.2rem
// addPostcssPlugins([require('postcss-pxtorem')({
// rootValue: 100,
// minPixelValue: 2,
// propList: ['*'],
// }),]),
)
}
@MicahZJ
请问这部分代码写在哪里呢？

[MicahZJ]

const {override,addWebpackAlias,addPostcssPlugins} = require('customize-cra')
const path = require('path')
const stylus = () => (config) => {
const stylusLoader = {
test: /.styl$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
// 样式名规则配置
localIdentName: '[local]--[hash:base64:5]',
},
},
},
// .styl 20px -> 0.2rem { loader: 'px2rem-loader', options: { remUnit: 100 } },
{
loader: 'stylus-loader',
},
],
}
const oneOf = config.module.rules.find((rule) => rule.oneOf).oneOf
oneOf.unshift(stylusLoader)
return config
}
module.exports = {
webpack: override(
addWebpackAlias({
['src']: path.resolve(__dirname, 'src'),
}),
stylus(),
// 方式一：css文件20px -> 0.2rem
addPostcssPlugins([ require("postcss-px2rem")({ remUnit: 100 }) ]),
// 方式二：css文件20px -> 0.2rem
// addPostcssPlugins([require('postcss-pxtorem')({
// rootValue: 100,
// minPixelValue: 2,
// propList: ['*'],
// }),]),
)
}
@MicahZJ
请问这部分代码写在哪里呢？

图上有的啊，webpack.config.prod.js