webpack @import 无法使用别名 alias

Question

我用的是 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'

有大佬知道要怎么解决吗？万分感激！！

Answer 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...

Answer 2

webpack.resolve.alias配置