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

最近学习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 就可以