scss @import 中的 Webpack 和别名

Posted 2023-02-22

【中文标题】scss @import 中的 Webpack 和别名

【英文标题】：Webpack and Aliases within scss @import

【发布时间】：2017-10-15 22:02:02

【问题描述】：

给出以下项目结构：

|- 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 别名：

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 的工作解决方案？

谢谢！

【参考方案1】：

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

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

要通知 webpack 它应该被解析为一个模块，你可以用~ 开始路径，你的别名将被正确应用。另见sass-loader imports。

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