zoukankan      html  css  js  c++  java
  • react 配置使用less后缀文件

    //安装less less less-loader
    npm install less less-loader --save-dev

    安装完成后,在项目中的config目录下找到webpack.config.js文件(说明:新建项目一般默认不显示config目录的,需要执行npm run eject)

    //在文件中,找到以下代码
    const cssRegex = /.css$/;
    const cssModuleRegex = /.module.css$/;
    const sassRegex = /.(scss|sass)$/;
    const sassModuleRegex = /.module.(scss|sass)$/;
    
    //在这里添加less正则
    const lessRegex = /.(less)$/;
    const lessModuleRegex = /.module.(less)$/;

    最后加入如下代码:

     {
                  test: lessRegex,
                  exclude: lessModuleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 2,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                    },
                    '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'
                  ),
               },
  • 相关阅读:
    CSS Grid网格布局全攻略
    正则表达式不要背
    前端模块化的前世今生
    关于React Hooks,你不得不知的事
    精简版LINUX系统---wdOS
    TypeScript_泛型
    typescript_类
    ES5_对象 与 继承
    TypeScript_基础数据类型
    vue-route+webpack部署单页路由项目,访问刷新出现404问题
  • 原文地址:https://www.cnblogs.com/nimon-hugo/p/12705253.html
Copyright © 2011-2022 走看看