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

Question

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

我正在使用CSS框架(谱)，这是我通过NPM安装的。我现在只想进口其中的一部分。我已经找到了一种让它工作的方法，但是它非常麻烦，我想找到一种使用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正确导入外部SCSS？
• Webpack-简单+ vue-cli和SASS -不能编译吗？
• 在vue-cli v3.x中使用sass资源加载程序

但却找不到答案，也找不到答案。

Answer 1

Vue CLI项目的URL转换规则允许在项目的node_modules/中使用~作为路径别名，因此您可以这样做：

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

不需要更改您的Vue配置。