• 技术文章 >web前端 >前端问答

    React不支持less文件怎么办

    长期闲置长期闲置2022-05-05 10:06:32原创126

    方法:1、利用“npm install less less-loader”安装less;2、在“module.rules”中将“test:/\.css$/”修改为“test:/\.(css|less)$/”;3、重新启动后即可支持less。

    本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

    React不支持less文件怎么办

    create-react-app是由React官方提供,并推荐构建React单页应用程序的最佳方法,但是默认不支持less,需要手动集成:

    1,必须手动安装less

    npm install less less-loader

    2,暴露webpack配置文件【npm run eject】,修改weppack.config.js文件中,添加less配置

    在module.rules节点中找到 css 文件的加载规则:

    test: /\.css$/ 修改为 test: /\.(css|less)$/;

    在use数组最后新增一个对象元素{loader: require.resolve('less-loader')}。

    修改完成后:

    33333.png

    const getStyleLoaders = (cssOptions, preProcessor) => {
        const loaders = [
          isEnvDevelopment && require.resolve('style-loader'),
          isEnvProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: Object.assign(
              {},
              shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
            ),
          },
          {
            loader: require.resolve('css-loader'),
            options: cssOptions,
          },
          {
            // Options for PostCSS as we reference these options twice
            // Adds vendor prefixing based on your specified browser support in
            // package.json
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebook/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('postcss-preset-env')({
                  autoprefixer: {
                    flexbox: 'no-2009',
                  },
                  stage: 3,
                }),
              ],
              sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            },        
          },
          {
            loader: require.resolve('less-loader') // compiles Less to CSS
          }
        ].filter(Boolean);
        if (preProcessor) {
          loaders.push({
            loader: require.resolve(preProcessor),
            options: {
              sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            },
          });
        }
        return loaders;
      };

    需要重新启动项目,即可看到less样式可用。

    推荐学习:《react视频教程

    以上就是React不支持less文件怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:cordova和react有什么区别 下一篇:react中的switch的用法是什么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• react中canvas的用法是什么• react中怎么修改组件状态• react三种定义组件方法有什么区别• vue和react哪个体积大• react兼容什么版本的ie
    1/1

    PHP中文网