从零开始搭建一个react项目

原创已于 2025-01-21 21:47:13 修改 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2025-01-21 17:14:46 首次发布

1. 初始化项目

npx create-react-app my-react-app
cd my-react-app

2.安装less和less-loader

npm install less less-loader --save-dev
//yarn add less less-loader --dev

3.修改webpack配置


npm run eject
//不可逆 也可使用customize-cra和react-app-rewired，来覆盖Create React App的默认Webpack配置

运行此命令后，你的项目根目录下将出现一个config文件夹，其中包含Webpack的配置文件，打开webpack.config.js找到module下面的rules数组

// module: {
     // rules: [
        //{
          //oneOf: [
//放这里
          //].filter(Boolean),
//}

{
  test: /\.(css|less)$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // options here
      },
    },
    {
      loader: require.resolve('less-loader'), // adds support for less files
      options: {
        lessOptions: { // optional: pass options to less-loader
          javascriptEnabled: true,
        },
      },
    },
  ],
}

5.打开模块化

 test: /\.(css|less)$/,
              use: [
                require.resolve('style-loader'),
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    modules:true,//打开模块化
                  },
                },

//在style files regexes下面加这段
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.less$/;

//sassRegex下面添加这段

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
              {
                importLoaders: 3,
                modules:true,   //我是这里出不来，又新增了这条
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              },
              'less-loader'
            ),
            sideEffects: true,
          },
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 3,
                modules:true,   
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              },
              'less-loader'
            ),
},


/*********/
loader: require.resolve(‘css-loader’),
//options: cssOptions, 这句改成
options:{modules:{localldentName:'[name][local]_[hash:base64:5]'}}

7.运行项目