CompilingSCSSwithWebpack(@importusedtoworkfine)的问题

问题描述：在使用SCSS编写样式时，通过@import导入其他scss文件，但是在Webpack打包过程中报错。

解决方案：在webpack配置文件中添加sass-loader和node-sass依赖，并修改resolve.alias和resolve.extensions配置。

示例代码：

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  resolve: {
    alias: {
      // 让@符号直接指向src目录，方便使用绝对路径
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.scss'],
  },
  // ...
};

package.json

{
  // ...
  "devDependencies": {
    // ...
    "node-sass": "^5.0.0",
    "sass-loader": "^12.0.0",
    // ...
  },
}