vue项目css-loader配置alias无效

Question

看了css-loader文档于是想试一下https://www.webpackjs.com/loa...使用vue-cli3搭建的项目配置代码css:{loaderOptions:{css:{alias:{'@css':path.join(__dirname,'src','css'),}},}},项目中的使用@import"@css/common.postcss";.wrap{padding:var(--common-space);&.contain{background:var(--common-background);padding:var(--common-fill);}}报错信息errorin./src/views/job-management/report/completeness/index.vue?vue&type=style&index=0&id=464df02c&lang=postcss&scoped=true&Modulebuildfailed(from../node_modules/postcss-loader/src/index.js):Error:Failedtofind'@css/common.postcss'in[E:\数据资产项目\数据资产项目-前台\datamanagement\vue_project\data_quality\src\views\job-management\report\completeness]atresolveModule.catch.catch(E:\数据资产项目\数据资产项目-前台\datamanagement\vue_project\node_modules\postcss-import\lib\resolve-id.js:35:13)at跳过postcss-loader同样报错,不过报的错不一样了@import"@css/test.css";报错信息Thisdependencywasnotfound:*-!../../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./@css/test.cssin../node_modules/css-loader??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/views/job-management/report/completeness/index.vue?vue&type=style&index=0&lang=css&Toinstallit,youcanrun:npminstall--save-!../../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./@css/test.css

Answer 1

参照postcss-import文档
解决了这个问题
'postcss-import':{
resolve:function(id){
letalias={
"@dq-common":path.join(__dirname,'data_quality','src','css','common.postcss')
}
returnalias[id]?alias[id]:id;
}
},
                            

Answer 2

楼主可以试试下面的方法：
module.exports={
...
configureWebpack:()=>({
resolve:{
alias:{
'@css':path.join(__dirname,'src','css'),
}
},
....
})
//用法如下