记录CreateReactApp给Less带来的坑

先说一下问题。

在我的项目中的样式文件想要使用webpack的alias来引入图片等资源

但是总是解析不到,解析目录非常奇怪,就算不用alias也一直在变,导致我不管怎么调整都解析不到这个文件。

真是气死我了,搞了好久,一度放弃less使用css。说来奇怪,css就可以解析到。

乱七八糟的包下了一堆也没能解决问题。

早上头铁又搞了一早上,调整create-react-app的loader引入顺序还是不行,就在我想要再次放弃的时候,我突然发现有一个奇怪的包。

resolve-url-loader。没错就是这个傻逼的包,是webpack官网上没有的,于是它显得十分突兀。

我直接把他注释了,特么的。可以了。

附上修改后的geteStyleLoaders,其实没做什么,修改了postcss的加载顺序放在less后面,注释了resolve-url-loader。

但是,我这么做应该在只用Css的时候就不会去解析postcss-loader了,不过问题不大,懒得优化,反正也不打算用回css

在此记录一下,以防下次想用回css的时候又出现奇怪的bug。

```javascript

 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      }
    ].filter(Boolean);
    if (preProcessor) {
      const isLessOptions =
        (preProcessor === 'less-loader')
          ? {
            lessOptions: {
              modifyVars: {

              },
              javascriptEnabled: true,
            },
            sourceMap: true
          } : {
            sourceMap: true
          }
      loaders.push(
        // {
        //   loader: require.resolve('resolve-url-loader'),
        //   options: {
        //     sourceMap: isEnvProduction && shouldUseSourceMap,
        //   },
        // },
        {
          loader: require.resolve(preProcessor),
          options: isLessOptions,
        },
        {
          // 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,
              }),
              // Adds PostCSS Normalize as the reset css with default options,
              // so that it honors browserslist config in package.json
              // which in turn let's users customize the target behavior as per their needs.
              postcssNormalize(),
            ],
            syntax:require('postcss-less'),
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },

      );
    }
    return loaders;
  };

```

原文地址:https://www.cnblogs.com/uX-180506/p/13733972.html