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;
    };
  • 相关阅读:
    1509 -- Glass Beads POJ
    1043: [HAOI2008]下落的圆盘
    面向对象的特性一:封装性
    java的值传递机制
    可变参数的形参方法
    方法的重载
    类及对象
    面向对象
    数组的常用算法问题
    数组的常见异常
  • 原文地址:https://www.cnblogs.com/xiaoxingchao/p/9559957.html
Copyright © 2011-2022 走看看