首页 文章

scpack @import中的Webpack和别名

提问于
浏览 次
1

鉴于以下项目结构：

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

谢谢！

webpack sass webpack-2

1 回答

  • 1

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

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

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

    @import '~common/scss/global.scss';
    回复于

相关问题