Next.js问题：使用next-sass时Webpack ExtractTextPlugin无法提取node_modules中的SCSS

嘿，我来帮你解决这个Next.js里引入带SCSS的外部组件的问题！你遇到的这个错误，本质是Next.js默认不会处理node_modules目录下的SCSS文件——哪怕用了withSass插件也一样，它默认只处理你项目内部的样式文件。当外部组件（比如你这里的star-rating）试图引入自己的SCSS时，Webpack没办法解析这些SCSS语法，就抛出了那个@import "_vars"的错误。

给你几个可行的解决方案：

方案一：修改Webpack配置，让它处理指定外部组件的SCSS #

首先确保你已经装了必要的依赖：sass、@zeit/next-sass（如果是Next.js 12+的话其实不需要这个插件，后面会单独说明）。然后修改你的next.config.js，扩展Webpack规则，把外部组件的目录加入到SCSS处理范围里：

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  webpack(config, options) {
    // 找到已有的SCSS规则
    const sassRule = config.module.rules.find(rule => rule.test.toString().includes('.scss'));
    if (sassRule) {
      // 把star-rating的目录加入到include列表里
      sassRule.include.push(/node_modules\/star-rating/);
    }
    return config;
  }
});

如果上面的方式不生效，你也可以直接新增一条专门处理star-rating的SCSS规则：

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  webpack(config) {
    config.module.rules.push({
      test: /\.scss$/,
      include: /node_modules\/star-rating/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    });
    return config;
  }
});

方案二：直接引入外部组件编译好的CSS（更省心） #

你可以看看star-rating的package.json，有没有指向编译好的CSS文件的字段（比如style或者main）。如果有的话，直接引入它的CSS文件而非SCSS，比如：

import 'star-rating/dist/style.css'; // 具体路径以组件实际输出为准

这样就绕开了处理SCSS的环节，简单又高效。

针对Next.js 12+的额外说明 #

如果你用的是Next.js 12或更高版本，官方已经自带了Sass支持，不需要再依赖@zeit/next-sass插件。可以直接这样配置next.config.js：

module.exports = {
  sassOptions: {
    includePaths: ['./node_modules/star-rating/src/styles'],
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.scss$/,
      include: /node_modules\/star-rating/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
    return config;
  }
};

记得要安装相关依赖，没装的话执行下面的命令：

npm install style-loader css-loader sass-loader sass --save-dev

试试这些方法，应该就能解决你的问题了！

内容的提问来源于stack exchange，提问作者Antoine Laurent