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

时间:2020-03-31 12:57:01

标签: twitter-bootstrap vue.js sass sass-loader

我有一个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文件。

有人对我在做什么错有想法吗?非常感谢任何输入。

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

我想为使用vue-cli构建的项目提供一种替代方案,因为如果最终您在多个组件中使用了mixins。必须每次都手动导入它们,同时还要在文件中添加额外的代码,这可能会很麻烦。

您可以设置sass-loader来向每个组件中注入cssscss。对于涉及SCSS的mixinsfunctionsvariables之类的东西,这很方便。

下面,我将导入一个名为_theming.scss的文件,该文件将导入Bootstraps mixinsvariablesfunctions。 这样,我可以在组件中自由使用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";

注意: 请注意不要在您使用的文件css中放置任何呈现的prependData。因为这会将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;
}