Can't scss find the path after webpack has configured the alias?

projects built by vue-cli

webpack.base.config.js

resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
        "vue$": "vue/dist/vue.esm.js",
        "@": resolve("src"),
        "components": path.resolve(__dirname, "../src/components"),
        "~base": resolve("src/base"),
        "~api": resolve("src/api"),
        "~common": resolve("src/components/common"),
    }
},

in the vue file

import Slider from "~base/slider/slider.vue";
import {getRecommend} from "~api/recommend.js";
import {ERR_OK} from "~api/config.js";

this is the

where the file can be found.

but in the scss file

@import "~common/scss/mixin.scss";
@import "~common/scss/variable.scss";

so you can"t find it. You must start looking up under the current scss file path to find it.

excuse me, where is this configured? THANK Q.

Mar.19,2021

@ import "~ common. -" @ import "~ ~ common add a wavy line.
or change alias ~ common to common. Let's try it with ~ common.

Menu