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

时间:2016-01-11 08:42:03

标签: sass webpack autoprefixer sass-loader

我的项目结构:

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 个答案:

答案 0 :(得分:62)

我能够在样式表上使用我在webpack中定义的别名,使用以下内容:

@import '~alias/variables';

仅使用~为别名加前缀为我做了诀窍,正如here

中的文档所示

答案 1 :(得分:5)

与此主题相关的其他修复,请删除.scss

@import '~scss/common.scss';

应该是

@import '~scss/common';

答案 2 :(得分:2)

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

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

答案 3 :(得分:2)

在我的情况下,依赖项是节点模块,因此可以这样导入它:

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

当使用实际的节点模块目录名时,我的编辑器(PhpStorm)不再显示未解决的路径错误(@tkiethanom提到的问题)。好像我想使用sass样式导入(例如,用my-package/colors代替my-package/_colors.scss来指定webpack配置中的别名),该别名的名称似乎无关紧要,只要我使用节点模块目录名