在尝试导入SASS模块时，如何使用带有VUE CLI的路径

Question

我正在使用Vue CLI启动一个新项目，这是我第一次使用它。

我正在使用我通过NPM安装的CSS框架(Specter(。我现在尝试仅导入其中的一部分。我找到了一种使它起作用的方法，但这很麻烦，我想使用includePaths选项找到更好的方法。

基本上，可以这样总结整个内容：我有一个看起来像这样的*.scss文件：

@import "./node_modules/spectre.css/src/accordions";
@import "./node_modules/spectre.css/src/avatars";
@import "./node_modules/spectre.css/src/badges";
@import "./node_modules/spectre.css/src/breadcrumbs";
...

我显然想通过从所有导入中删除./node_modules/spectre.css/src/部分来简化它。

在vue.config.js中，这是我拥有的：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }

但这不起作用。

我已经查看了以下问题：

• 如何使用webpack和vue.js？

正确@import外部SCSS

• webpack-simple vue-cli with sass-不能编译？

• 使用vue-cli v3.x

使用sass-resources-loader

，但找不到答案，或者找不到答案。

Answer 1

vue CLI项目的URL变换规则允许使用~作为PATH ALIAS进入项目的node_modules/，因此您可以这样做：

@import "~spectre.css/src/accordions";
@import "~spectre.css/src/avatars";
@import "~spectre.css/src/badges";
@import "~spectre.css/src/breadcrumbs";

不需要对您的VUE配置进行更改。