加载 bootstrap/scss/mixins 到 Vue scss 组件

Question

我有一个 vue 应用程序，其组件使用 scss。我已经安装了 sass-loader，一切正常 - 除了当我尝试导入 bootstrap scss 文件时。

这是失败的特定导入：

<style lang="scss">
@import url("~bootstrap/scss/mixins");
...

我收到以下错误：

This dependency was not found:

* -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!bootstrap/sc
ss/mixins in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-load
er/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=style&index=0&lang=scss&

To install it, you can run: npm install --save -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loade
r/src/index.js??ref--8-oneOf-1-2!bootstrap/scss/mixins

相比之下，以下导入工作正常：

<style lang="scss">
@import url("~bootstrap/dist/css/bootstrap.css");
...

由此可以得出结论，它不是对本身失败的 NPM 包的引用。似乎是因为 a) 我没有正确引用特定的 _mixins.scss 文件，或者 b) 我必须配置我的 sass 加载程序才能从 NPM 包导入 scss 文件。

有人知道我做错了什么吗？非常感谢任何输入。

Answer 1

您不需要使用 URL 功能。

尝试这样的事情：

<style lang="scss">
@import '~bootstrap/scss/mixins';
<style>

如果你想从Bootstrap导入所有模块，你可以这样做：

<style lang="scss">
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

// Optional Modules
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';
<style>

Answer 2

我想为那些使用 vue-cli 构建的项目提供替代方案，因为如果您最终在多个组件中使用 mixins。每次都必须手动导入它们，同时还要向您的文件添加额外的代码，这会变得很乏味。

您可以设置 sass-loader 将 css 或 scss 注入每个组件。这对于 SCSS 的 mixins、functions 和 variables 之类的东西很方便。

下面我将导入一个名为 _theming.scss 的文件，此文件导入 Bootstraps mixins、variables 和 functions。这样我就可以在我的组件中自由使用 Bootstrap 的变量，如果我在 _theming.scss 文件中进行任何覆盖，这些也将应用于我的应用程序。

vue.config.js（如果此文件不存在，请在 package.json 所在的项目根目录中创建它）

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_theming.scss";`
      }
    }
  }
};

_theming.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

注：请注意，不要在 prependData 中使用您使用的文件中呈现的任何 css。因为这会将 css 添加到您拥有的每个组件，即使您没有在组件中使用 css，也会增加您的包大小。

例如，如果您将文件 _theming.scss 更改为：

.text-red {
  color: red;
}

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

你所有的组件都会突然包含 css:

.text-red {
  color: red;
}

加载 bootstrap/scss/mixins 到 Vue scss 组件

Loading bootstrap/scss/mixins into Vue scss component

twitter-bootstrap

vue.js

sass

sass-loader