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$/;
  • 相关阅读:
    POJ 2253 Frogger(最短路 Floyd)
    POJ 1062 昂贵的聘礼 (最短路 Dijkstra)
    POJ 3259 Wormholes(最短路Bellman_Ford)
    POJ 3414 Pots(容量BFS)
    POJ 3087 Shuffle'm Up(模拟题)
    POJ 3216 Prime Path(数字BFS)
    refresh的停车场
    基于邻接表的广度优先搜索遍历
    判断给定图是否存在合法的拓扑排序
    威威猫系列故事——篮球梦
  • 原文地址:https://www.cnblogs.com/fanqshun/p/14029007.html
Copyright © 2011-2022 走看看