webpack @import 无法使用别名 alias

Linhh
  • 33

我用的是 vue-cli 2.x 创建的项目,然后在 .vue 文件中

<style>
@import '@/assets/icon/iconfont.css';
</style>

会报错:Module build failed: Error: Failed to find '~@/assets/icon/iconfont.css'

就算我加了 ~ 依然会报错:Module build failed: Error: Failed to find '~@/assets/icon/iconfont.css'

有大佬知道要怎么解决吗?万分感激!!

回复
阅读 2.3k
2 个回答
茬芐迷茫
  • 1
新手上路,请多包涵

@import '~@/assets/icon/iconfont.css';

别名前面 添加 [ ~ ]

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src'),
        'static': path.resolve(__dirname, 'src/static'),
        'assets': path.resolve(__dirname, 'src/assets'),
        'components': path.resolve(__dirname, 'src/components')
    }
}

CSS loader 会把把非根路径的url解释为相对路径, 加 ~ 前缀才会解释成模块路径

来源: https://www.jianshu.com/p/c3a...

webpack.resolve.alias配置

宣传栏