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

最新推荐文章于 2023-02-17 16:37:09 发布

大脸猫&蓝皮鼠

最新推荐文章于 2023-02-17 16:37:09 发布

阅读量605

点赞数

CC 4.0 BY-SA版权

文章标签： react less

本文链接：https://blog.youkuaiyun.com/duanran0/article/details/105654701

本文详细介绍了在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 就可以