39

我的项目结构：

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

4

4 回答 4

91

我可以在样式表上使用我在 webpack 中定义的别名，方法是：

@import '~alias/variables';

正如此处~的文档所建议的那样，只需在别名前面加上前缀就可以了

于 2016-04-13T11:11:48.093 回答
8

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

@import '~scss/common.scss';

应该

@import '~scss/common';
于 2016-11-07T21:23:16.333 回答
3

由于您的webpack.config.js文件已经在/app文件夹中，别名不应该是：

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

?

于 2016-01-11T19:12:16.823 回答
2

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

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

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

于 2018-08-09T14:30:37.037 回答