Question

让我说我有： CSS / style1.css CSS / style2.css ... 等

并且html是这样的：

<html>
<head>
<link ... src="css/style1.css">
<link ... src="css/style2.css">
</head>
<body>...</body>
</html>

我想阅读css的所有内容并将其设为：

<html>
<head>
<style>...(all css styles go here)</style>
</head>
<body>...</body>
</html>

读取css并将其放入是很容易的（即使用php的file_get_contents），但如果css包含url（url（../ images / something.png））或@import则会很难。

我知道有一些像minify css（https://github.com/mrclay/minify）这样的工具可以读取多个css并将它们组合成一个大的css，但是，它仍然不是我想要的（我想要的是所有样式都必须是在里面

那么有没有可以轻松完成此任务的工具/脚本？

Answer 1

请试试这个

<style type="text/css">
  @import url("style1.css");
  @import url "style2.css";
</style>

OR

<style type="text/css">
  @import url("style1.css");
  p { color : #f00; }
</style>

http://webdesign.about.com/cs/css/qt/tipcssatimport.htm

OR

make main CSS将文件粘贴到main css文件

中的代码下面

@import url('style1.css');
@import url('style2.css');
@import url('style3.css');
@import url('style4.css');

在源代码下面加上

<link rel="stylesheet" type="text/css" src="main.css"></link>

Answer 2

这应该有效：

<html>
<head>
<style>
    @import url('css/style1.css');
    @import url('css/style2.css');
</style>
</head>
<body>...</body>
</html>

Answer 3

你正在使用php，所以你可以做这样的事情来获得你的CSS。

<html>
 <head>
  <style type='text/css'>
   <?php
     $css = file_get_contents('path/to/style1.css'); //get your css contents
     echo $css; //paste your css
   ?>
  </style>      
 </head>
</html>

转换style1.css，style2.css ...并将内容放入<style> ... </style>

3 个答案: