在我的HTML5中有几个css,每个css都代表不同的东西,比如按钮类型的css,特定效果的css。。。
我应该怎么做才能"打包"所有这些css?
示例:
<link rel="stylesheet" href="/css/fonts/_font-icons.css">
<link rel="stylesheet" href="/css/fonts/_font-trebuchet.css">
<link rel="stylesheet" href="/css/fonts/_font-verdana.css">
<link rel="stylesheet" href="/css/utilities/_colors.css">
<link rel="stylesheet" href="/css/utilities/buttons/shapes/_circle.css">
<link rel="stylesheet" href="/css/utilities/buttons/types/_switch-indicator.css">
<link rel="stylesheet" href="/css/utilities/_sizing.css">
<link rel="stylesheet" href="/css/components/partials/cards/charts/main/_main.css">
<link rel="stylesheet" href="/css/components/partials/cards/charts/secondary/_sales.css">
<link rel="stylesheet" href="/css/effects/_no-select.css">
你不会改善加载时间,但如果你只是不想有这么多链接标签,你可以只链接一个css文件,并使用@import导入其他文件。
main.css(放置在/css/内(
@import 'fonts/_font-icons.css';
@import 'fonts/_font-verdana.css';
@import 'fonts/_font-trebuchet.css';
@import 'utilities/_colors.css';
@import 'utilities/buttons/shapes/_circle.css';
@import 'utilities/buttons/types/_switch-indicator.css';
@import 'utilities/_sizing.css';
@import 'components/partials/cards/charts/main/_main.css';
@import 'components/partials/cards/charts/secondary/_sales.css';
@import 'effects/_no-select.css';
然后在html文件中:
<link rel="stylesheet" href="/css/main.css">
如果可能的话,我建议使用sass,并将所有这些文件编译成一个文件。