sass构建CSS时，如何给文件随机加版本号，以防止老文件缓存？

Posted 2023-04-27

1、线上的时候：在模板文件里对css跟js的引入路径后面追加一个类似于常量来做版本号
<link rel="stylesheet" href="style.css?version=20150828" />
2、线下测试的时候：对css跟js的引入路径后面追加随机数，时时刻刻更新，避免缓存影响了调试。
3、线下测试后：升级常量的版本号，把代码更新上去，这样用户的浏览器刷新就用到了新的样式，而又用到了缓存。 参考技术A 假设是在SASS编译阶段生成随机文件名，在模板文件如何引用一个确定的静态文件资源呢？
所以应该在发布阶段去解析模板文件中的静态资源，采用一定策略来生成文件名或版本号，一般采用两种办法：
1.在模板文件引用静态资源的时候做处理，加一个过滤器；
2.发布时检索文件中的link和script，改变文件名；
至于随机数的策略就无所谓了，时间戳，文件MD5之类的都行，时间戳的好处是简单暴力，坏处是客户端的缓存在每次发布后都会无效，MD5的方法会更有效，但是这意味着发布时需要前端和后台的模板代码最好在一台服务器上，不然读取文件做MD5运算会很麻烦；
另外就是如果不是跟后缀的模式，需要配置nginx(假设的服务器是nginx)或者做一个controller来专门解析资源了。

node sass 版本 3.5.3 正在破坏构建

【中文标题】node sass 版本 3.5.3 正在破坏构建

【英文标题】：node sass release 3.5.3 is breaking build

【发布时间】：2016-08-16 19:58:01

【问题描述】：

这也是目前使用 gulp-sass 的项目。 gulp-sass 依赖于 node-sass#^3.4.1，它刚刚自动更新到 3.5.3，这是一个破坏性版本。

通过更新 package.json 文件，但它仍在中断。

如何回到node sass 3.4.2？

错误信息

错误：您不能从@media 中@extend 外部选择器。 您只能在同一指令中 @extend 选择器。

  "version": "1.0.0",
  "name": "abcd",
  "devDependencies": 
     "bower": "^1.3.12",
    "express": "^4.12.3",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-bower": "^0.0.7",
    "gulp-concat": "^2.5.2",
    "gulp-install": "^0.4.0",
    "gulp-livereload": "^3.8.0",
    "gulp-minify-css": "^1.0.0",
    "gulp-plumber": "^1.0.0",
    "gulp-sass": "2.1.0",
    "gulp-sourcemaps": "^1.5.1",
    "gulp-uglify": "^1.1.0"
  ,
  "dependencies": 
    "jquery": "1.11.1"
  

【问题讨论】：

它是怎么破的？错误是什么？

我已经更新了它不支持@extend inside media query的帖子。

这和 Gulp 有什么关系？ Extend 不应该在媒体查询中工作。

这是一个错误的概念肉桂。它适用于旧版本的节点 sass。节点 sass 错误处理程序可能会发生一些变化以显示此消息。如果您睁大眼睛，所有使用节点包的开发人员在过去 3 天都面临此问题，因为节点 sass 版本更新

【参考方案1】：

看起来像new version was just released that allows the "buggy" version of node-sass，但如果您需要，您始终可以npm shrinkwrap 将特定子依赖项添加到特定版本 - 假设主包与该依赖项版本兼容。

这会将gulp-sass 中的node-sass 版本锁定到3.4.2：

  "name": "yourprojectname",
  "version": "1.0.0",
  "dependencies": 
    "gulp-sass": 
      "version": "2.3.1",
      "from": "gulp-sass@>=2.3.1 <3.0.0",
      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-2.3.1.tgz",
      "dependencies": 
        "node-sass": 
          "version": "3.4.2"
        
      
    
  

在再次运行 npm install 之前，请确保删除您的 node_modules npm cache clean 以清除本地缓存的包。

【讨论】：

steveax 我认为它会起作用。但是你能帮我在我上面提到的我的包 json 中适应这种依赖关系

@SudiptoSarkar，上面的 JSON 块不会进入您的package.json，而是进入npm-shrinkwrap.json（与您的package.json 处于同一级别）。

感谢 steveax，它就像一个魅力，你知道它是什么，不管我的 npm 缓存中有什么，我什至不必运行 npm 缓存清理！

所以我对这个堆栈相当陌生，我无法让 shrinkwrap 工作，我做了一个 npm install 来安装所有依赖项，然后 npm install shrinkwrap 但是当我运行命令 npm shrinkwrap 我得到以下错误：无关：shrinkwrap@0.4.0 C:\dev\xxxx\node_modules\shrinkwrap

这是个好方法，但我得到错误：无效依赖：gulp-sass "version":"2.3.1","from":"gulp-sass@>=2.3.1