zoukankan      html  css  js  c++  java
  • Create React App 支持 Less Modules 的配置说明

    Create-React-App 版本:v4.0.1

    1. 未执行yarn eject的情形下

    @craco/craco(Create React App Configuration Override - 配置扩展库)版本:v5.8.0
     
    craco.config.js配置文件代码内容如下:
    const CracoLess = require('craco-less');
    const CracoAntDesign = require('craco-antd');
    const path = require('path');
    
    module.exports = {
      plugins: [
        // 针对Less的相关配置(如module样式)
        {
          plugin: CracoLess,
          options: {
            lessLoaderOptions: {
              lessOptions: { javascriptEnabled: true },
            },
            modifyLessRule: function() {
              return {
                test: /.module.less$/,
                exclude: /node_modules/,
                use: [
                  { loader: 'style-loader' },
                  {
                    loader: 'css-loader',
                    options: {
                      modules: {
                        localIdentName: '[local]_[hash:base64:6]',
                      },
                    },
                  },
                  { loader: 'less-loader' },
                ],
              };
            },
          },
        },
        // `Ant Design`相关配置
        {
          plugin: CracoAntDesign,
          options: {
            customizeThemeLessPath: path.join(
              __dirname,
              'src/antd.customize.less',
            ),
          },
        },
      ],
    };

    2. CRA原始工程已被eject的情形下

    CRA v4.0.1版本eject后直接运行可能会报错,提示“找不到@babel/plugin-syntax-jsx” !

    这里我们手动安装一下: yarn add -D @babel/plugin-syntax-jsx

    因为工程中,我们还需要用到less和less-loader,所以先安装下:

    yarn add -D less less-loader

    webpack.config.js文件中(v4.0.1版本的第535行之后,sass相关配置之后)增添如下代码:

    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
        'less-loader'
      ),
    },
    
    // lessRegex 在上部自行定义:
    const lessRegex = /.less$/;
    
    // lessModuleRegex 在上部自行定义:
    const lessModuleRegex = /.module.less$/;
  • 相关阅读:
    SlideShare
    准备SCJP考试
    Sun的过去
    shardingjdbc基础教程
    上万页大数据量的分页查询方案
    shardingjdbc教程 看这一篇就够了
    微服务化的认识
    JDK9对String底层存储的优化
    水平分表
    深入理解Java中的字段与属性的区别
  • 原文地址:https://www.cnblogs.com/fanqshun/p/14029007.html
Copyright © 2011-2022 走看看