尝试导入 sass 模块时，如何在 Vue CLI 中使用包含路径？

Posted 2023-02-22

【中文标题】尝试导入 sass 模块时，如何在 Vue CLI 中使用包含路径？

【英文标题】：How to use include paths with Vue CLI, when trying to import sass modules?

【发布时间】：2019-10-10 10:20:53

【问题描述】：

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

我正在使用通过 NPM 安装的 CSS 框架 (Spectre)。我现在正试图只导入其中的一部分。我找到了一种让它工作的方法，但它很麻烦，我想找到一个更好的方法，使用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')]
   

但这不起作用。

我查看了以下问题：

How to @import external SCSS properly with webpack and Vue.js?

Webpack-simple + vue-cli with SASS - Can't compile?

Using sass-resources-loader with vue-cli v3.x

但是找不到答案，或者想不通。

【参考方案1】：

URL transform rules of Vue CLI projects 允许使用~ 作为项目node_modules/ 的路径别名，因此您可以这样做：

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

无需更改您的 Vue 配置。

【讨论】：

我知道，但我想找到一种方法来做@import "accordions";。这也是了解它如何在未来项目中发挥作用的问题。