webpack 轉換 less，開啓 CSS Modules 後背景圖片失效

開發背景

使用 create-react-app 建立 React 項目後，經過 react-app-rewired 開啓了 less 轉換的功能。

但經過抄襲 react-app-rewire-css-modules 模塊開啓 CSS Modules 發如今 *.module.less 裏面的背景圖片失效，須要修改圖片路徑爲 ../yourdir/yourImage 的方式纔能有效解決（進入上一層級目錄，在進入當前文件夾目錄）。

issues 上面也有一個相似的問題，CSS background img path error

解決方案

須要在轉換 less 的後面加一個 loader，名字是 resolve-url-loader。

若是是 sass 能夠參考上面的 issues 修復問題。

react-app-rewired 方案，代碼以下：

/**
 * less
 * 抄襲：https://github.com/codebandits/react-app-rewire-css-modules
 */
const path = require('path');
const cloneDeep = require('lodash.clonedeep');

const ruleChildren = loader =>
    loader.use ||
    loader.oneOf ||
    (Array.isArray(loader.loader) && loader.loader) ||
    [];

const findIndexAndRules = (rulesSource, ruleMatcher) => {
    let result = undefined;
    const rules = Array.isArray(rulesSource)
        ? rulesSource
        : ruleChildren(rulesSource);
    rules.some(
        (rule, index) =>
            (result = ruleMatcher(rule)
                ? { index, rules }
                : findIndexAndRules(ruleChildren(rule), ruleMatcher))
    );
    return result;
};

const findRule = (rulesSource, ruleMatcher) => {
    const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
    return rules[index];
};

const cssRuleMatcher = rule =>
    rule.test && String(rule.test) === String(/\.css$/);

const createLoaderMatcher = loader => rule =>
    rule.loader &&
    rule.loader.indexOf(`${path.sep}${loader}${path.sep}`) !== -1;
const cssLoaderMatcher = createLoaderMatcher('css-loader');
const postcssLoaderMatcher = createLoaderMatcher('postcss-loader');
const fileLoaderMatcher = createLoaderMatcher('file-loader');

const addAfterRule = (rulesSource, ruleMatcher, value) => {
    const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
    rules.splice(index + 1, 0, value);
};

const addBeforeRule = (rulesSource, ruleMatcher, value) => {
    const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
    rules.splice(index, 0, value);
};

function createRewireLess({
    localIdentName = `[local]___[hash:base64:5]`,
    lessLoaderOptions = {}
}) {
    return function(config, env) {
        const cssRule = findRule(config.module.rules, cssRuleMatcher);
        const sassRule = cloneDeep(cssRule);
        const cssModulesRule = cloneDeep(cssRule);

        cssRule.exclude = /\.module\.css$/;

        const cssModulesRuleCssLoader = findRule(
            cssModulesRule,
            cssLoaderMatcher
        );
        cssModulesRuleCssLoader.options = Object.assign(
            { modules: true, localIdentName },
            cssModulesRuleCssLoader.options
        );
        addBeforeRule(config.module.rules, fileLoaderMatcher, cssModulesRule);

        sassRule.test = /\.less$/;
        sassRule.exclude = /\.module\.less$/;
        addAfterRule(sassRule, postcssLoaderMatcher, {
            loader: require.resolve('less-loader'),
            options: lessLoaderOptions
        });

        addBeforeRule(config.module.rules, fileLoaderMatcher, sassRule);

        const sassModulesRule = cloneDeep(cssModulesRule);
        sassModulesRule.test = /\.module\.less$/;
        // sassModulesRule.exclude = path.resolve(__dirname, 'node_modules');
        // fix image url
        addAfterRule(sassModulesRule, postcssLoaderMatcher, {
            loader: require.resolve('resolve-url-loader')
        });
        addAfterRule(sassModulesRule, postcssLoaderMatcher, {
            loader: require.resolve('less-loader'),
            options: lessLoaderOptions
        });
        addBeforeRule(config.module.rules, fileLoaderMatcher, sassModulesRule);

        return config;
    };
}

const rewireLess = createRewireLess({});

rewireLess.withLoaderOptions = createRewireLess;

module.exports = rewireLess;

若是是 webpack 的配置，以下：

let module = {
    importLoaders: 3,
    modules: true,
    localIdentName: '[name]_[local]_[hash:base64:5]'
};
let loaders = [
    {
        loader: 'css-loader',
        options: module
    },
    {
        loader: 'postcss-loader',
        options: {
            plugins: [require('autoprefixer')('last 100 versions')]
        }
    },
    {
        loader: 'resolve-url-loader'
    },
    {
        loader: 'less-loader',
        options: {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#1DA57A' }
        }
    }
];

原文閱讀： webpack 轉換 less，開啓 CSS Modules 後背景圖片失效