把模块导入css

将模块（如组件、库）导入到css中，可以让我们更方便地编写样式。比如，如果我们使用了一个带有特定class的组件，我们可以直接在css中导入，而不需要一个一个手动定义。

@import 'path/to/component.scss';
/* 使用了组件的class名 */.header {
    @extend .component-header;
}

上面的例子中，我们将一个名为component.scss的模块导入到了css中，然后使用了其中的class名。这个例子还使用了sass的继承功能，让.header元素继承了.component-header元素的样式。

注意，导入模块后，我们可以直接使用其中的class名，而不需要加上模块名。如果我们在组件中定义了名为header的class，而在导入到css中后又定义了名为header的class，那么后者会覆盖前者。

/* 在组件中定义的class */.component-header {
    font-size: 24px;
}

/* 导入到css中后重定义的class */.header {
    font-size: 18px;
}
    

在上面的例子中，.header实际上使用了.css组件中的样式，而不是组件中定义的样式。

在导入模块时，我们还可以通过"url()"导入外部css文件。

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* 使用Google字体 */body {
    font-family: 'Open Sans', sans-serif;
}
    

上述代码中，我们使用了Google提供的Open Sans字体，并将其导入到了css中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！