跟着夜来大神学前端,摸爬滚打向前行

方法总比困难多,撸起裤管就是干!

拦路虎

less-loader结合webpack4.0报错

大致两类报错,第一类: input有问题;第二类: 无法resolve less文件

解决: 在src目录下创建index.css,文件即可,规定!

完整配置:

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

oneOf: [
    {
        test: lessRegex,
        exclude: lessModuleRegex,
        use: getStyleLoaders({
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        // modules: true,
        },'less-loader'),
        // Don't consider CSS imports dead code even if the
        // containing package claims to have no side effects.
        // Remove this when webpack adds a warning or an error for this.
        // See https://github.com/webpack/webpack/issues/6571
        sideEffects: true,
    },
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
        test: lessModuleRegex,
        use: getStyleLoaders({
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
        },'less-loader'),
    },
    ...省略...
]

放入oneofarray中,*从后往前解析*,当作为模块当如的时候,匹配规则是module.less;普通使用是,匹配规则是less,在react脚手架中,是作为模块导入,所以需要将less文件名定义为xxx.module.less方可生效,皆因modules: true配置。

less@3.9.2配置babel-import-plugin失败

less@3.x版本以后,参数改了,改变传参格式即可

完整配置:

yarn add babel-import-plugin

修改webpack@4配置文件,在匹配js|jsx的plugins中加入以下配置:

{
    test: /\.(js|mjs|jsx|ts|tsx)$/,
...省略...
    plugins: [
        [
        'import',
        {
            libraryName: 'antd',
            style: 'css',
        },
        ],
    ],
...省略...
}