zoukankan      html  css  js  c++  java
  • create-react-app初始化报错及配置less

    官方文档

    • 我擦咧,新建的文件夹不见了
    //报错
    warning There appears to be trouble with your network connection. 
    Retrying... error An unexpected error occurred: "http://10.1.10.33:8082/@timer%2fdetect-port: no such package available". 
    info If you think this is a bug, please open a bug report with the 
    with the information provided in "D:\antm-demo\yarn-error.log".
    info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
    

    执行以下代码

    1. npm config set registry https://registry.npm.taobao.org
    2. npm config set disturl https://npm.taobao.org/dist

    ===

    快速启动项目

    1. npm i create-react-app -g

    2. create-react-app react-demo

    3. cd react-demo/

    4. npm start

    安装less-loader 和 less

    • npm install less-loader less --save-dev

    修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

    exclude: [
      /.html$/,
      /.(js|jsx)$/,
      /.(css|less)$/,   //敲黑板,划重点
      /.json$/,
      /.bmp$/,
      /.gif$/,
      /.jpe?g$/,
      /.png$/,
    ],
    {
      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
        }
      ],
    }
    
  • 相关阅读:
    各种alloc傻傻分不清楚
    嵌入式开发一般流程
    谈谈看门狗在嵌入式中的用法
    基于开发板的二次嵌入式开发
    谈一谈接口电路
    学习ucos和ARM体系结构的路线图
    寻找链表的中位节点(利用快慢指针)
    水箱容积问题
    盛水最多的容器
    数据结构与算法分析C语言描述第二版第79页
  • 原文地址:https://www.cnblogs.com/Lewiskycc/p/7007993.html
Copyright © 2011-2022 走看看