Question

鉴于以下项目结构：

|- 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文件中。我不想使用相对路径，因为组件结构可能有不同的嵌套。

目前我正在使用Webpack Aliases：

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

我正在使用@import'common / scss / global.scss';和@import'common / scss / variables.json'并且它不起作用。

模块构建失败
要导入的文件未找到或无法读取。

PS。使用json-loader，sass-loader等。

请您帮忙找到如何在不使用相对'../../../../../'路径的情况下导入JSON和SCSS的工作解决方案？

谢谢！

Answer 1

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

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

要通知webpack它应该作为模块解析，您可以使用~启动路径，并且您的别名将被正确应用。另请参阅sass-loader imports。

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

scpack @import中的Webpack和别名

1 个答案: