最初使用的是css文件没有任何问题,使用lessc less/index.less css/index.css 把index.css 转成less文件进行引入后发现报错:
Refused to apply style from 'http://localhost:63342/cssworld/less/index.less' because its MIME type ('application/octet-stream') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
原来是引用的是时候link标签中使用了rel="stylesheet" 去解析less文件,结果报错,把这个属性改变下即可,需要注意的是html引入less文件需要加载less.js对文件进行解析
<link rel="stylesheet" href="./less/index.less">
<link rel="stylesheet/less" href="./less/index.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
如果使用webstorm开发,webstorm需配置file watchers 帮助我们将less文件转义成css文件,这样html直接引用css文件即可
PS: 参考文档
webstorm 配置less解析参考 https://www.cnblogs.com/haley168/p/webstorm_less.html
<link>便签用法 http://www.w3school.com.cn/tags/tag_link.asp
当我继续学习less的高级用法时,比如在里面可以直接执行js函数,计算后返回需要的参数,但是这时候webstorm编译报错了
error: Inline JavaScript is not enabled Is it set in your options?
上次遇到这个问题还是在自定义修改iview主题时,webpack打包报出来的错,错误原因less是3.x或者3.x以上的版本。当时解决的方法是less-loader 中加入配置less-loader加个options { loader: 'less-loader', options: { javascriptEnabled: true } }
但是这次遇到的问题有所不同,这次是用webstorm编译less文件,就想在file watcher中修改less的options,但是并没有找到,既然是版本的问题 于是只能把less的版本从最新的3.9.0改为2.7.1,果然改过版本就不会报错了。但是既然版本有更新,那果断要用最新的版本呀,于是又把less从2.7.1改为3.9.0了。本想再想办法解决这个问题的。没曾想wenstorm又不报错了。百思不得其解。。。。。。。。。
如果有碰到类似问题的小伙伴可以下面评论下,谢谢大大们。