使用 _（下划线）时，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')
    }
  }
}

样式.scss

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