使用 _(下划线)时，Webpack 别名不解析 SCSS 部分

Question

长话短说，当与别名结合使用时，使用 scss 部分(带下划线的文件名)似乎不起作用？!还是我做错了什么？ Webpack v.4.41

/core/styles/_core.scss

body { awesome: style }

/app/styles/style.scss

import '@core/core';

webpack.config.js

{
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      '@core': path.resolve(__dirname, './core/styles')
    }
  }
}

这会引发错误: SassError: File to import not found or unreadable: @core/core.但是，如果我将导入更改为 @core/_core它工作正常。

Answer 1

显然，在处理别名和 scss 导入时，您应该在导入前加上波浪号 ~并在没有它的情况下定义别名本身:

webpack.config.js

{
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'core': path.resolve(__dirname, './core/styles')
    }
  }
}

style.scss

@import '~core/core';
// correctly imports the ./core/styles/_core.scss