Webpack scss@import内的网页包和别名

项目结构如下：

|- SRC
|-- COMMON
|---- SCSS
|------ GLOBAL.scss
|------ VARIABLES.json (scss colors in json structure)
|-- PAGES
|---- COMPONENTS
|------ COMPONENT A
|-------- SCSS
|---------- componentA.scss
|------ COMPONENT B
|-------- SCSS
|---------- componentB.scss

我想将@import global.scss文件导入到单组件scss文件中。我不想使用相对路径，因为组件结构可能有不同的嵌套

目前我使用的是网页包别名：

resolve: {
  alias: {
    common: path.resolve(__dirname, 'src/common/')
  }
}

我使用@import'common/scss/global.scss'；和@import'common/scss/variables.json，但它不起作用

• 模块生成失败
• 要导入的文件找不到或不可读

使用json加载程序、sass加载程序等

您能否帮助找到如何在不使用相对路径“../../../../../../../../../”的情况下导入JSON和SCS的工作解决方案

---

谢谢

Sass对相对路径没有特殊语法，因此您的导入相当于：

@import './common/scss/global.scss';

要通知webpack应将其解析为一个模块，您可以使用

~

启动路径，您的别名将正确应用。另见

@import '~common/scss/global.scss';