Craco误将自定义SCSS文件扩展名识别为LESS的问题求助

核心问题 #

报错显示Webpack试图解析.less文件而非.scss，根源有两点：

• Loader链混乱：你的getStyleLoader同时包含sass-loader和less-loader，处理SCSS文件时，less-loader会介入解析@import语句，默认查找.less后缀的文件。
• 缺少SCSS扩展名配置：webpackConfig.resolve.extensions只添加了.less，Webpack无法自动补全.scss后缀。

修复步骤 #

1. 拆分Loader链，分离Sass和Less处理逻辑 #

修改addLoaders函数中的loader定义，让Sass和Less使用独立的loader链，避免相互干扰：

// 提取通用基础loader：仅保留style、css、postcss loader
const getBaseStyleLoader = (cssOptions, styleLoaderOptions = {}) => [
  {
    loader: 'style-loader',
    options: styleLoaderOptions,
  },
  {
    loader: require.resolve('css-loader'),
    options: cssOptions,
  },
  {
    loader: require.resolve('postcss-loader'),
    options: {
      postcssOptions: {
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
      sourceMap: shouldUseSourceMap,
    },
  },
];

// Sass专用loader链：追加sass-loader
const getSassLoader = (cssOptions) => {
  const styleLoaderOptions = { injectType: 'lazyStyleTag' };
  return [
    ...getBaseStyleLoader(cssOptions, styleLoaderOptions),
    {
      loader: 'sass-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    }
  ];
};

// Less专用loader链：追加less-loader
const getLessLoader = (cssOptions) => {
  const styleLoaderOptions = {
    insert: function insertAtTop(element) {
      var parent = document.querySelector('head');
      var lastInsertedElement = window._lastElementInsertedByStyleLoader;

      if (!lastInsertedElement) {
        parent.insertBefore(element, parent.firstChild);
      } else if (lastInsertedElement.nextSibling) {
        parent.insertBefore(element, lastInsertedElement.nextSibling);
      } else {
        parent.appendChild(element);
      }

      window._lastElementInsertedByStyleLoader = element;
    },
  };

  return [
    ...getBaseStyleLoader(cssOptions, styleLoaderOptions),
    {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    }
  ];
};

2. 添加SCSS扩展名到Webpack解析配置 #

在webpack.configure中，把.scss和.sass加入resolve.extensions，让Webpack能自动补全SCSS文件后缀：

webpackConfig.resolve.extensions.push('.less', '.scss', '.sass');

3. 修复Less-loader版本兼容问题 #

你的less-loader@4.0.6与less@4.1.3版本不兼容，建议升级less-loader到适配版本：

npm install less-loader@10.x --save-dev
# 或使用yarn
yarn add less-loader@10.x --dev

4. 移除冗余依赖（可选） #

你已经手动配置了Less loader，craco-less可能会造成配置冲突，建议卸载：

npm uninstall craco-less
# 或使用yarn
yarn remove craco-less

验证修复 #

修改完成后，重新运行craco start，Webpack会正确识别.scss文件的@import语句，不再尝试查找.less后缀。

内容的提问来源于stack exchange，提问作者Ishara M