Ant-design-mobile: 在addLessLoader中设置主题色不生效

Created on 3 Jun 2019 · 7Comments · Source: ant-design/ant-design-mobile

ant-mobile:2.2.13
create-react-app:3.0.1
config-overrides.js里边的代码如下:
````

const {override, fixBabelImports,addLessLoader} = require('customize-cra');
const addCustomize = () => config => {
require('react-app-rewire-postcss')(config, {
plugins: loader => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-aspect-ratio-mini')({}),
require('postcss-px-to-viewport')({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 2, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
require('postcss-write-svg')({
utf8: false
}),
require('postcss-viewport-units')({}),
require('cssnano')({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
]
});
return config;
}

module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: true
}),
addLessLoader({
javascriptEnabled: true,
//下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
modifyVars: { "@primary-color": "#f47983"}
}),
addCustomize(),
);

````

question

Source

miyaliunian

👍1

All 7 comments

可以参考官网文档: https://mobile.ant.design/docs/react/customize-theme-cn

ziluo on 5 Jun 2019

我没用eject

miyaliunian on 5 Jun 2019

官网文档没有eject啊

ziluo on 6 Jun 2019

请问你解决了吗，我也遇到了，写法和你一样

Evangelione on 25 Jul 2019

fixBabelImports('import', { libraryName: 'antd-mobile', style: true }),
放在最后试试

qilovehua on 18 Aug 2019

👎1 👍1

ant-mobile:2.2.13
create-react-app:3.0.1
config-overrides.js里边的代码如下:


const {override, fixBabelImports,addLessLoader} = require('customize-cra');
const addCustomize = () => config => {
    require('react-app-rewire-postcss')(config, {
        plugins: loader => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
            }),
            require('postcss-aspect-ratio-mini')({}),
            require('postcss-px-to-viewport')({
                viewportWidth: 375, // (Number) The width of the viewport.
                viewportHeight: 667, // (Number) The height of the viewport.
                unitPrecision: 2, // (Number) The decimal numbers to allow the REM units to grow to.
                viewportUnit: 'vw', // (String) Expected units.
                selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
                minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
                mediaQuery: false // (Boolean) Allow px to be converted in media queries.
            }),
            require('postcss-write-svg')({
                utf8: false
            }),
            require('postcss-viewport-units')({}),
            require('cssnano')({
                preset: "advanced",
                autoprefixer: false,
                "postcss-zindex": false
            })
        ]
    });
    return config;
}



module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        //下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
        modifyVars: { "@primary-color": "#f47983"}
    }),
    addCustomize(),
);

晕死，折腾了一下午，发现less变量名antd和antd-mobile不一样，antd-mobile这里应该是brand-primary 不是primary-color