首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

scss使用laravel-mix成功编译,但在浏览器中不会更改

问题:scss使用laravel-mix成功编译,但在浏览器中不会更改。

回答: 这个问题可能是由于缓存导致的。当我们使用laravel-mix编译scss文件时,它会生成一个编译后的CSS文件,并将其链接到HTML文件中。但是,浏览器可能会缓存CSS文件,导致在修改了scss文件后,浏览器没有及时更新显示最新的样式。

解决这个问题的方法是使用版本控制。laravel-mix提供了一种简单的方法来为编译后的文件添加版本号,以确保浏览器能够正确地获取到最新的文件。在webpack.mix.js配置文件中,可以使用mix.version()方法来为编译后的文件添加版本号。

另外,还可以尝试清除浏览器缓存来查看是否能够解决问题。可以按下Ctrl + F5(Windows)或Command + Shift + R(Mac)来强制刷新页面,这样浏览器将会重新下载并加载最新的CSS文件。

如果问题仍然存在,可能是由于其他原因导致的。可以检查以下几点:

  1. 确保scss文件的路径和文件名没有错误,laravel-mix会根据配置文件中的路径来查找scss文件进行编译。
  2. 检查编译后的CSS文件是否被正确地链接到HTML文件中。可以在浏览器的开发者工具中查看页面的源代码,确认CSS文件的链接是否正确。
  3. 检查scss文件中的代码是否正确,是否存在语法错误或其他问题导致编译失败。

总结: 以上是针对问题的可能解决方法和排查步骤。如果问题仍然存在,建议进一步检查laravel-mix的配置文件、scss文件和HTML文件的相关代码,以及浏览器的缓存设置等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Laravel Mix 初探

mix, 它目前可以做的事情就是编译 src/app.js 到 dist/, src/app.scss 到 dist/, 看起来非常简洁优雅。...output, [require('postcss-some-plugin')()]); // mix.browserSync('my-site.dev'); <-- 可以自动监控你的文件变化,并将更改注入浏览器...这里可以配合Browsersync,它可以自动监控你的文件变化,并将更改注入浏览器,而无需手动刷新。...现在,当你修改webpack.mix.js文件监控下的静态资源或者 Laravel 的 PHP 文件时,浏览器会即时刷新页面以响应你的更改。...常用的case 版本控制和清理缓存 开发者经常会使用编译后的资源文件名加上时间戳或者是唯一的token作为版本号,强迫浏览器加载全新的资源文件,而不是缓存的文件。

4.3K60
  • 在 Laravel 项目中使用 Bootstrap 框架

    对于 Bootstrap 所需 CSS 文件,会在 resources/sass/app.scss 引入: @import '~bootstrap/scss/bootstrap'; 从 Laravel...如果你使用的开发环境是 Homestead 的话,那么系统已经为你安装好了,去 Homestead 执行即可;如果你使用的是 Laradock 的话,需要在 laradock/.env 设置 WORKSPACE_INSTALL_NODE...命令,意为在开发环境对前端资源进行编译,如果需要的话你可以在这里对命令参数进行修改,如果是在生产环境,需要运行 npm run prod 命令,如果在开发环境想要修改文件后自动编译资源可以运行 npm...laravel-mix 库,然后运用它提供的 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js,将 resources/sass/...app.scss (Sass文件)编译打包后输出到 public/css/app.css: 这样,我们就可以项目的前端文件下引入 /css/app.css 和 /js/app.js 使用 Bootstrap

    3.4K31

    前后端分离探索——MVC 项目升级的一个过渡方案

    传统项目大多数是 MVC 架构,直接使用 PHP 等后端语言渲染 HTML 模板,返回给浏览器 现在,前后端分离不需要后端渲染模板,而是交由浏览器 Javascript 渲染,后端只需要返回前端渲染所需要的数据即可...传统 MVC 项目直接升级到前后端分离需要大量的时间与人力,在业务多变的阶段并不适合,所以便有了本文的过渡方案探索 路由先不分离,仍然采用 PHP 提供的路由 模板部分分离,在原 PHP 模板,引入...Vue 编译后的模板,为此需要约定 # 示例 新建控制器 TestController.php <?...25 26 27 28 29 30 31 32 33 34 35 36 # 前后端伪分离 后端框架:Phalcon + Hyperf 前端框架:Bootstrap + jQuery + Vue 前端编译使用...,此时,PHP 模板已正确引入 Vue 访问路由,PHP 渲染模板,返回给浏览器 浏览器加载 Vue,交由 Vue 渲染页面 # 局限 不能做到全局自动加载组件 编译后的文件大小可能会很大 # 优势

    1.2K20

    将博客主题替换成 Clean Blog

    2、下载相关依赖库 这里,我们选择使用 Clean Blog 作为博客主题,这是一个基于 Bootstrap 框架的免费主题,不同于以往下载主题包及关联前端资源文件到本地再引入,我们现在可以直接通过 NPM.../scss/bootstrap"; @import "~startbootstrap-clean-blog/scss/clean-blog"; 引入的样式资源包含 Bootstrap 以及 Clean...然后在 webpack.mix.js 补充对应的处理逻辑: const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...5、编译前端资源文件 完成以上编码后就可以在项目根目录下执行 npm run dev 编译打包前端资源了: ? 编译成功后,就可以在 public 目录下看到对应的新文件了: ?...7、演示最终效果 完成视图模板代码重构后,就可以在浏览器访问替换主题后的博客首页了: ? ? ? 下篇教程,我们将演示联系表单页面构建以及将表单数据传递给后端进行验证和存储。

    73320

    CSS 预编译语言 Sass 快速入门教程

    1、CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用和扩展的代码,在日常开发使用,如果没有完善的编码规范...为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带来的问题之外,还支持嵌套书写,减少重复输入父级选择器(可理解为 CSS 的继承机制...通常会使用 Sass 编写样式代码,Laravel 默认提供的样式代码也是 scss 结尾的,也是使用的 Sass 语言。...Mix 进行前端资源的编译,当我们通过 npm install 安装 laravel-mix 的过程,系统会自动安装 laravel-mix 声明的依赖,其中就包括了编译 Sass 所需要的 node-sass...文件,另一个是 Vue 组件,我们在属性设置 lang="scss" 表示这里面是 Sass 代码,需要 Laravel Mix 编译的时候将其编译到指定的

    7.1K41

    让 F5 歇一会儿——laravel-mix 自动刷新之道

    因为近几年来大部分时假在与 Laravel 打交道,使用 laravel-mix 已成家常便饭,所以想着总结并分享一下 laravel-mix 工作流的自动刷新之道。...打开页面,修改页面引用的前端资源(如 js,css)并保存,页面将自动刷新 因为使用 laravel-mix 编译,一般修改 resource/ 目录下的文件,但实际上直接修改 public/ 目录的文件也是可以触发刷新的...较复杂,可能需要针对目前存在的 Bug 作特殊处理 较复杂,需要安装依赖,并在入口模板手动添加额外 js 引用(或使用浏览器插件) 主要优势 功能强大,配置灵活,可同时响应前后端文件变化,适合绝大部分场景...而 hmr 我通常只在调试 SPA 项目时使用,因为它响应速度快,而且通常不会影响应用状态,十分方便。...但同时需要注意的是 laravel-mix 环境下使用 hmr 也存在一些问题(当前最新版本 4.0.15 仍存在),例如与 mix.extract() 没法同时使用( 见 Issue ) 以及在windows

    2.4K20

    Homestead + laravel-mix 环境下 hmr 的两种玩法

    在虚拟机终端执行yarn run hot,然后在浏览器使用绑定的测试域名(如:laravel.test)访问 34.修改 JS 等,自动编译浏览器页面即自动更新 玩法二:使用宿主机的 Node...与玩法一不一样,不再需要特别在 hmrOptions 中指定 devServer 和 host 和 port,使用默认的就好(事实上也不能像前面那样指定,因为会出现 IP/端口 冲突) 3.在宿主机终端执行...yarn run hot,然后在浏览器使用绑定的测试域名(如:laravel.test)访问4....修改 JS 等,自动编译浏览器页面即自动更新 总结 两种方法并没有谁好谁坏之分,具体使用哪种方法视具体场景及个人喜好而定。...二是自己使用的 IDE(PhpStorm)运行在宿主机(Windows),而 PhpStorm 的一些插件(或服务)如 Eslint、TypeScript、 Prettier 需要使用使用本地安装的一些

    1.6K10

    如何更优雅的编写CSS代码

    在实验性或小的APP,这么做可以满足需求,但在专业级别的app上。想都别想。幸运的是,SCSS允许我们进行专业的app编写。..._variables.scss main.scss 这取决于你自己。 ok,你成功说服我采用你的方案,但有时候浏览器不支持scss文件,咋整? 说得好!...在你进行编码是运行npm run watch,并在浏览器打开index.html文件,如果你想压缩你的 css 文件,使用npm run build命令 在index.html的head标签中将编译好的...这意味着 node-sass将会监听你代码的任何更改,当他们发生改变时,它会自动编译为css,这在开发是个很有用的功能。...所有我们按如下方式编写 css 代码: 将所有的 scss 文件写入一个主文件 通过 Autoprefixer为css添加浏览器供应商前缀 编译 css 文件 这将是最后的步骤了,所有耐心和我一起完成吧

    1.9K10

    引入 SB Admin 2 作为后台管理系统主题

    require('startbootstrap-sb-admin-2/js/demo/chart-bar-demo') CSS 部分 接下来,在 resources/sass 目录下新建 admim.scss...用于定义后台管理系统的样式代码,这里引入 SB Admin 2 提供的 Sass 源代码即可: @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"...; 通过 Laravel Mix 编译前端资源 做好以上准备工作后,就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了: const mix...= require('laravel-mix') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js', 'public/js/admin.js...5、测试整体效果 在 blog 项目的 public 目录下运行 php -S localhost:9000 启动 PHP 内置 Web 服务器,然后在浏览器访问 http://localhost:9000

    4.2K10

    在 Laravel 项目中使用 webpack-encore

    而我迁移的这个项目,是一个 Laravel 项目,所以下面就分享下,如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...// export the final config module.exports = config 新增 php helper 函数 Laravel 自带了一个 mix() 函数用于引用 mix 编译的资源...encore_entry_link_tags 和 encore_entry_script_tags 引用编译的前端资源 在模板里使用前面添加的 helper 函数引用资源,你会发现它比 Laravel...(scripts) 因为 laravel 项目默认 package.json develop 等相关的脚本都是使用 laravel-mix 的,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore...: "cross-env NODE_ENV=production encore production" }, 运行脚本,愉快撸 BUG 做完前面的这些步骤之后,在终端执行 yarn run hot ,浏览器输入项目绑定的域名

    2.1K20

    使用Gulp进行JavaScript自动化简易说明书

    它包含一个将SCSS文件编译为 cs的简单任务。它使用一个名为 gulp-sass插件,这个插件基于libsass。...运行以下命令并观察,/ scss文件夹的所有SCSS文件都将编译到相应目录的CSS: gulp scss 请注意,在本示例,我们指定了要运行的任务。...为了启动它,请使用以下命令: gulp 这个命令启动名为 “default”并开启watcher.的任务,此时,您可以编辑任何SCSS文件,并重新编译CSS文件。...在本节,我们将介绍所有的添加和更改。 return gulp.src(['scss/**/*.scss', '!scss/**/_*']) 在这个例子,Gulp源提供了一个glob数组。...以下是几个杰出的例子: BrowserSync BrowserSync注入CSS,JavaScript,并在进行更改时自动刷新浏览器

    3.2K10

    高级 Bootstrap:发挥 Sass 定制的威力

    虽然开箱即用的 Bootstrap 样式非常出色,但在某些情况下,你可能希望进一步定制设计。...组件定制你可以使用 Sass 定制 Bootstrap 的特定组件。假设你想更改 Bootstrap 导航栏的背景颜色。...; background-color: lighten($success, 20%);}此代码创建一个新类,该类使用 text-truncate 混合、标准 body 颜色和成功颜色的较浅变体。...可以在终端中使用 sass 命令执行此操作:sass custom.scss:custom.css记得在 HTML 链接新创建的 CSS 文件:<link rel="stylesheet" href=...使用 Sass 构建响应式设计Bootstrap 的响应式网格系统是其最强大的功能之一。但是,如果你想在特定断点处更改特定列的大小,该怎么办?

    29610

    为什么我们不擅长 CSS

    等框架的实用工具类并无太大区别,只不过在任何其他情况下,你都不会使用 page__header 为元素添加 20 像素的 padding 。...我们希望我们的风格足够通用,可以在不同的语境重复使用,但又不会太通用,以至于我们不得不在这些语境不断重复自己的风格。...这张卡片包含一个推荐信,但我们可能想在不同的上下文中使用这种卡片模式。我们的卡片不应关心其内部的内容。也就是说,在这个特定的卡片示例,我们不会使用 .card- 对所有内容进行限定。...如果我们想更改我们的品牌颜色用于背景的值,我们可以更改一个标记,将其应用于不同的组件,而无需查找 与其让开发人员访问所有令牌,不如将它们抽象到我们的类,开发人员可以根据不同的上下文使用相应的类。...此外,由于我们使用的是 SCSS,因此我们可以在标记名上使用更多字数,因为无论如何,它们都会编译成更小的值。 这个特定卡片中的内容包括一张图片和一个块状引文,使用 flexbox 水平排列。

    19410

    Uni-App项目搭建以及准备工作

    使用cli方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了。 如果需要开发小程序,当然就要成为小程序端的开发者,所以第二步就是注册成为小程序端的开发者,拥有appid。...最后点击创建,即可成功创建 uni-app 项目。 ? 官方模板地址:DCloud 插件市场 ? 创建完成后目录结构如下 目录结构介绍 ?...注意: static 目录下的 js 文件不会编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。...css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。...头条小程序,先模拟运行,然后打开头条小程序开发工具,导入项目,选择上图的mu-toutiao目录,后面更改文件,就好自动更新编译过去了。 总结 项目搭建是非常快速的,和vue脚手架一样便利。

    2.7K21

    在小程序框架 wepy 中使用 iconfont 图标字体

    猜想这应该是为了兼容不同的浏览器而形成的不同格式,打开 iconfont.css 瞅一眼,可以看到前面几行是引入了下面几个文件,还有注释,分别是兼容 IE9 、IE6-8 等各种版本的浏览器。...拷进来之后还要做一些更改。 由于我在项目中用了 SCSS,为了引入方便将文件名改为 iconfont.scss。...虽然 SCSS 也能直接引入 CSS 文件,但我试了如果用 .css 作为后缀则引不成功,所以还是改成 .scss 吧。...然后改 iconfont.scss 里的代码,把代码引入其他文件的代码都删掉,只保留有 base64 的那行: url('data:application/x-font-woff2;charset=utf...改完 iconfont.scss ,再在 app.wpy 引入即可。 @import ".

    1.2K20

    前端入门23-CSS预处理器(Less&Sass)声明正文-CSS预处理(less&Sass)

    浏览器最终肯定是只认识 CSS 文件的,它并无法处理 CSS 的那些变量、逻辑语句,所以需要有一个编译的过程,将 Sass 或 Less 写的代码转换成标准的 CSS 代码,这个过程就称为 CSS...我觉得,掌握 CSS 预处理的关键,其实也就两点,一是掌握语言的语法、二是清楚怎么编译成标准的 CSS 文件;语法基本都不会很难,编译一般需要配置一些环境,因为我使用的开发工具是 WebStrom,所以会介绍下...Less 使用 Less 写的 CSS 文件后缀名为 .less,但浏览器并不认识 less 文件,所以最后需要转换成 css 文件,有两种方式: 借助 less.js,程序运行期间,浏览器会自动借助...既然是作为函数使用,那么它们存在的意义就只是被调用,所以转换后的 CSS 不会存在这个函数。...作用域 Less 的变量分局部作用域和全局作用域,但在 Sass ,不同版本,作用域范围并不一样,摘抄一段原文中描述: Sass 变量的作用域在过去几年已经发生了一些改变。

    1.6K30
    领券