Question

我正在使用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')]
} } } }

但这不起作用。

我看了以下问题：

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

Answer 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配置。

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

1 个答案: