react-ant design mobile - webpack 自定义主题

本文详细介绍了在React项目中配置自定义主题的过程,包括解决webpack配置中less-loader的问题,以及如何在package.json中指定主题变量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近学习react 遇到了这个问题

仅仅是记录  问题和解决问题的方法 若那啥  请移步。。。

若是哪里不足,请指教。。。

 

根据官网  配置自定义主题  会报

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 

意思是  我需要一个加载程序  来加载这个文件类型,但是 我已经加载了  less-loader

错误的写法

{
    test: /\.less$/,
    use:[
        'style-loader',
        'css-loader',
        {loader: 'less-loader', options: {modifyVars: theme}}
    ]
}

解决:

const theme = require('./package.json').theme
{
    test: /\.less$/,
    use:[
        'style-loader',
        'css-loader',
        {
            loader: require.resolve('less-loader'),
            options: {
                javascriptEnabled: true,
                modifyVars: theme
            }
        }
    ]
}

这样 我就能正常使用自定义主题了

全部更改文件

webpack.config.js中

找到 module

module: {
    rules: [{
        test: /\.css$/,
        loader:['style-loader', 'css-loader']
    }, {
        test: /\.less$/,
        use:[
            'style-loader',
            'css-loader',
            {
                loader: require.resolve('less-loader'),
                options: {
                    javascriptEnabled: true,
                    modifyVars: theme
                }
            }
        ]
    }, {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: 'img/[name].[hash:7].[ext]'
        }
    }, {
        test:/\.(woff|svg|eot|ttf)\??.*$/,
        use:[
            'file-loader'
        ]
    }, {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          plugins: [
              ["import", { libraryName: "antd-mobile", style: true }]
          ]
        },
        exclude: /node_modules/
    }]
},

在package.json里加入

"theme": {
  "brand-primary": "#da4a49",
  "color-text-base": "#3e3e3e"
}

 

具体方法请看  ant-design-mobile theme官网   具体基础主题 

要是  使用的  react脚手架里的 webpack的话 

(1)需要新建一个config-overrite,js文件

(2)

const {
    override,
    fixBabelImports,
    addLessLoader
} = require("customize-cra");
const them = require("./them.json")

// 更改配置 override
module.exports = override(
    fixBabelImports("import", {
        liraryName: "antd-mobile", style: true // change
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: them
    })
)

(3)新建them.json文件

{
  "brand-primary": "red",
  "color-text-base":  "#333"
}

因为 使用的是脚手架里webpack  所以需要重新配置webpack  利用override 就可以

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值