zoukankan      html  css  js  c++  java
  • antd-mobile less文件用模块方式引入

     
    config-overrides.js文件修改:::::
    const { injectBabelPlugin, getLoader } = require('react-app-rewired');

    const fileLoaderMatcher = function (rule) {
    return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
    }

    module.exports = function override(config, env) {
    // babel-plugin-import
    config = injectBabelPlugin(['import', {
    libraryName: 'antd-mobile',
    style: 'css',
    // style: true, // use less for customized theme
    }], config);

    // customize theme
    config.module.rules[1].oneOf.unshift(
    {
    test: /.less$/,
    use: [
    require.resolve('style-loader'),
    {
    loader: require.resolve('css-loader'),
    options: {
    modules: true,
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]'
    },
    },
    {
    loader: require.resolve('postcss-loader'),
    options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/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',
    }),
    ],
    },
    },
    {
    loader: require.resolve('less-loader'),
    options: {
    modules: true,
    localIdentName: '[local]___[hash:base64:5]',
    // theme vars, also can use theme.js instead of this.
    modifyVars: { "@brand-primary": "#1DA57A" },
    },
    },
    ]
    }
    );

    // css-modules
    config.module.rules[1].oneOf.unshift(
    {
    test: /.css$/,
    exclude: /node_modules|antd-mobile.css/,
    use: [
    require.resolve('style-loader'),
    {
    loader: require.resolve('css-loader'),
    options: {
    modules: true,
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]'
    },
    },
    {
    loader: require.resolve('postcss-loader'),
    options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/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',
    }),
    ],
    },
    },
    ]
    }
    );

    // file-loader exclude
    let l = getLoader(config.module.rules, fileLoaderMatcher);
    l.exclude.push(/.less$/);

    return config;
    };
  • 相关阅读:
    【转载】如何保证消息的顺序性?
    【转载】如何保证消息的可靠性传输?
    Java 浅拷贝与深拷贝的区别
    int 与 Integer 的区别
    Systemd
    如何查看systemctl启动服务的日志journalctl
    centos7安装killall命令
    关闭root用户的ssh登录
    react带ts创建
    ts-类型别名、类型断言
  • 原文地址:https://www.cnblogs.com/xiaoxingchao/p/9559957.html
Copyright © 2011-2022 走看看