zoukankan      html  css  js  c++  java
  • create-react-app中添加less支持

    前言

    使用 create-react-app 脚手架创建项目后,默认是不支持 less 的。所以我们需要手动添加。

    第一步 暴露webpack配置文件

    使用 create-react-app 创建的项目,默认情况下是看不到 webpack 相关的配置文件,我们需要给它暴露出来,使用下面命令即可:

    npm run eject
    

    运行之后,我们发现多了一个config文件夹

    这样就可以修改 webpack 相关配置了。

    第二步 添加less

    在项目根目录 使用 npm 或者 yarn 来安装 less 和 less-loader,我这里使用的是 yarn

    yarn add less less-loader
    

    第三步 修改webpack配置文件

    我们需求修改 webpack.config.dev.js 和 webpack.config-prod.js 这两个配置文件

    • test: /.css$/ 改为 /.(css|less)$/
    • test: /.css$/ 的 use 数组配置增加 less-loader
    {
      test: /.(css|less)$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
        {
          loader: require.resolve('less-loader') // compiles Less to CSS
        }
      ],
    },
    

    结束

    重新运行项目,引入less,发现是不是可以使用了。

  • 相关阅读:
    SpringBoot整合Elasticsearch
    Elasticsearch环境搭建和介绍(Windows)
    Java并发AtomicBoolean类的使用
    RequestMapping详细用法
    RSA公钥加密 私钥解密
    java随机生成RSA密钥对
    java通过实体类生成数据库表 并生成注释
    设计模式-策略模式
    设计模式-模板方法模式使用
    设计模式-模板方法模式
  • 原文地址:https://www.cnblogs.com/zhouyangla/p/9607862.html
Copyright © 2011-2022 走看看