我有一个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文件。
有人对我在做什么错有想法吗?非常感谢任何输入。
答案 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
来向每个组件中注入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";
注意:
请注意不要在您使用的文件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;
}