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,发现是不是可以使用了。

  • 相关阅读:
    初学Cocos2dx
    炸弹人NABCD分析
    求二维整数数组中最大联通子数组的和
    大道之简读书笔记1
    求首位相连二维数组最大子矩阵的和
    求首位相连一维数组最大子数组的和
    求二维数组最大子数组的和
    程序员修炼之道读后感3
    电梯调度需求分析
    课堂作业第四周课上作业二
  • 原文地址:https://www.cnblogs.com/zhouyangla/p/9607862.html
Copyright © 2011-2022 走看看