vue项目css-loader配置alias无效

Question

看了css-loader文档于是想试一下
https://www.webpackjs.com/loa...
使用vue-cli3搭建的项目
配置代码

css: {
        loaderOptions: {
            css: {
                alias: {
                    '@css': path.join(__dirname, 'src', 'css'),
                }
            },
        }
    },

项目中的使用

<style lang="postcss" scoped>
@import "@css/common.postcss";
.wrap{
  padding: var(--common-space);
  & .contain {
    background: var(--common-background);
    padding: var(--common-fill);
  }
}
</style>

报错信息

 error  in ./src/views/job-management/report/completeness/index.vue?vue&type=style&index=0&id=464df02c&lang=postcss&scoped=true&

Module build failed (from ../node_modules/postcss-loader/src/index.js):
Error: Failed to find '@css/common.postcss'
  in [
    E:\数据资产项目\数据资产项目-前台\datamanagement\vue_project\data_quality\src\views\job-management\report\completeness
  ]
    at resolveModule.catch.catch (E:\数据资产项目\数据资产项目-前台\datamanagement\vue_project\node_modules\postcss-import\lib\resolve-id.js:35:13)
    at <anonymous>

跳过postcss-loader同样报错,不过报的错不一样了

<style>
@import "@css/test.css";
</style>

报错信息
This dependency was not found:

* -!../../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./@css/test.css in ../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&

To install it, you can run: npm install --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) {
                let alias = {
                    "@dq-common": path.join(__dirname, 'data_quality', 'src', 'css', 'common.postcss')
                }
                return alias[id] ? alias[id] : id;
            }
        },

Answer 2

楼主可以试试下面的方法：

module.exports = {
  ...
  configureWebpack: () => ({
    resolve: {
      alias: {
        '@css': path.join(__dirname, 'src', 'css'),
      }
    },
   ....
  })
// 用法如下
<style>
// 加破浪线 ~
@import "~@css/test.css";
</style>

Answer 3

这个就是css-loader识别alias的问题,参考：css-loader文档提到的alias。
alias前面要加~, 改成这样即可：

@import "~@css/test.css";