1、同样的 CSS 文件（其 Etag 相等），其响应的 Content-Type 等于 text/css 时，网页界面正常。如图1

图1

2、同样的 CSS 文件（其 Etag 相等），其响应的 Content-Type 等于 text/plain; charset=UTF-8 时，网页界面错乱。如图2

图2

3、当 其响应的 响应的 Content-Type 修改为 text/css 后，网页界面正常显示。如图3

图3

4、参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textcss 。在网页中要被解析为 CSS 的任何 CSS 文件必须指定 MIME 为text/css。通常，服务器不识别以.css 为后缀的文件的 MIME 类型，而是将其以 MIME 为text/plain 或 application/octet-stream 来发送给浏览器：在这种情况下，大多数浏览器不识别其为 CSS 文件，直接忽略掉。特别要注意为 CSS 文件提供正确的 MIME 类型。

1、使用NPM来安装Less编译器，查看NPM版本，如图1
npm -V

图1

2、全局安装Less编译器，在PhpStorm中运行NPM，选择File，打开Settings，如图2

图2

3、在“语言和框架”下单击Node.js和NPM，在打开的Node.js和NPM页面上，Packages区域显示当前在您的计算机上安装的所有Node.js相关软件包，无论是在全局还是在项目级别。less已安装，如图3

图3

4、创建一个文件观察者，选择File，打开Settings，如图2

图2

5、单击“工具”节点下的“文件观察者”。打开的File Watchers页面显示项目中已经配置的File Watcher列表。如图4

图4

6、重复第3步骤，发现less的安装在项目级别，非全局安装，如图5

图5

7、在全局模式下从命令行运行安装，在命令提示符下键入以下命令，使用淘宝 NPM 镜像，如图6

cnpm install -g less

图6

8、将这个文件夹：C:\Users\Administrator\AppData\Roaming\npm\node_modules\less 添加到PATH变量中，如图7

图7

9、重复第5步骤，指定程序文件夹：C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd，如图8

图8

10、新建一个style.less文件，新增一些内容，自动编译生成style.css文件，如图9

图9