首页 文章

webpack（使用sass-loader） - scss文件@import无法识别解析别名

提问于
浏览 次
25

我的项目结构：

webpack.config.js
app--

   --> src
   ---->> components
   ------>>> myComponent.js
   ------>>> myComponent.scss

   --> styles
   ---->> variables.scss

在webpack.config module.exports中：

...
resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
}

在我的文件中 - myComponent.scss：

@import "styles/variables";

构建bundle.js时出现此错误：

Module build failed:
@import "styles/variables";
^
      File to import not found or unreadable: styles/variables

我如何在sass文件中@import别名？

sass webpack autoprefixer sass-loader

4 回答

  • 2

    在我的情况下，依赖项是一个节点模块，因此我可以像这样导入它：

    @import '~node-module-name/variables';

    当使用实际的节点模块目录名称时，我的编辑器（PhpStorm）不再显示未解决的路径错误（@tkiethanom提到的问题） . 看起来我需要在webpack配置中指定别名，如果我想使用sass样式导入（例如 my-package/colors 而不是 my-package/_colors.scss ），并且看起来该别名的名称无关紧要，只要我使用节点模块目录名称

    回复于
  • 56

    我能够在样式表上使用我在webpack中定义的别名，使用以下命令：

    @import '~alias/variables';

    只是通过在 ~ 前面添加别名为我做了诀窍，正如here中的文档建议的那样

    回复于
  • 4

    另一个与此主题相关的修复，删除 .scss

    @import '~scss/common.scss';

    应该

    @import '~scss/common';
    回复于
  • 2

    由于您的 webpack.config.js 文件已在 /app 文件夹中，因此别名不应为：

    resolve: {
   alias: {
       styles: path.join(__dirname, 'styles') 
   }
}

    ？

    回复于

相关问题