开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Laravel mix -更改生产CSS输出选项

Laravel Mix是一个前端构建工具，它提供了一种简单的方式来编译、合并和压缩前端资源文件，如CSS、JavaScript和图片等。通过Laravel Mix，开发人员可以更高效地管理和优化前端资源。

在Laravel Mix中，可以通过更改生产CSS输出选项来定制生成的CSS文件的输出方式。具体来说，可以通过以下几种方式来更改生产CSS输出选项：

更改输出路径：可以使用mix.setPublicPath('path/to/directory')方法来指定生成的CSS文件的输出路径。这样可以将CSS文件输出到指定的目录中，而不是默认的public目录。
更改输出文件名：可以使用mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css').options({ processCssUrls: false, postCss: [ tailwindcss('./tailwind.config.js') ] })方法来指定生成的CSS文件的文件名。通过在sass()方法中传递第二个参数，可以指定生成的CSS文件的文件名。
启用/禁用CSS提取：可以使用mix.extract(['vue'])方法来启用CSS提取。这样会将指定的库或框架的CSS代码提取到单独的文件中，以便更好地利用浏览器的缓存机制。如果不需要CSS提取，可以简单地不调用mix.extract()方法。
启用/禁用CSS压缩：可以使用mix.minifyCss()方法来启用CSS压缩。这样会对生成的CSS文件进行压缩，减小文件大小，提高加载速度。如果不需要CSS压缩，可以简单地不调用mix.minifyCss()方法。
启用/禁用CSS源映射：可以使用mix.sourceMaps()方法来启用CSS源映射。这样会生成与CSS文件对应的源映射文件，方便在开发过程中进行调试。如果不需要CSS源映射，可以简单地不调用mix.sourceMaps()方法。

总结起来，通过更改生产CSS输出选项，可以定制生成的CSS文件的输出路径、文件名，启用/禁用CSS提取、压缩和源映射等功能，以满足项目的具体需求。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps

相关搜索:Laravel Mix不发出css CSS在Laravel Mix 5的生产环境中不起作用 Laravel mix -更改编号js文件的输出目录 Laravel webpack mix编译后删除CSS变量如何根据开发或生产模式更改CSS模块输出？laravel mix --产品未正确生成顺风css文件更改webpack mix laravel中的字体编译路径 Laravel mix会重新编译所有资源，即使只进行了css更改 Laravel Mix在生产模式下运行，但不在开发模式下运行使用Laravel MIX将多个CSS编译成一个CSS 更改Laravel Tinker输出颜色？Laravel mix表示构建成功，但更改不会生效 Laravel mix编译将styles.sass验证为空css文件如何使用Laravel Mix合并编译的SASS和组合的CSS？如何确保Laravel mix使用React开发工具构建显示为生产的React？PHP Laravel如何更改输出语言从选择列表选项更改CSS颜色 scss使用laravel-mix成功编译，但在浏览器中不会更改 Laravel mix在提供多个js文件进行构建时，无法正确构建css文件将表单选项更改为Laravel Collective

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Laravel Mix 初探

简介针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API，用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤，基本可以使到.../ postCss: [] <-- Post-CSS 选项: https://github.com/postcss/postcss/blob/master/docs/plugins.md // })...现在，当你修改webpack.mix.js文件监控下的静态资源或者 Laravel 的 PHP 文件时，浏览器会即时刷新页面以响应你的更改。...npm run production 将编译我们所有的静态资源，并产生一个生产就绪的构建。它将运行所有的Mix 任务，并且会压缩文件输出。...app.scss构建到public/css/app.css 基本上所有 Laravel Mix的配置和上面的文件都大大同小异。

4.3K6 0

在 Laravel 项目中使用 Bootstrap 框架

1、Laravel 如何引入 Bootstrap 如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js...，如果是在生产环境，需要运行 npm run prod 命令，如果在开发环境中想要修改文件后自动编译资源可以运行 npm run watch 命令。...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js： const mix = require('laravel-mix'); mix.js('resources/js/...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.4K3 1

引入 Laravel Mix 管理前端资源

API 帮助我们对 CSS 和 JavaScript 资源文件进行预处理，细节可参考 Mix 官方文档。...虽然该项目是针对 Laravel 框架开发的，不过，由于是一个纯前端项目，因此可以适用于所有 Web 前端项目，现在，我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前，需要先安装 Laravel Mix 组件需要的前端相关依赖，假设你的系统上已经安装过 Node 和 NPM 包管理器，如果没有安装的话前往 Node.js 官方下载页面...运行 npm install 初始化 package.json 的 devDependencies 选项中声明的前端依赖，会在当前目录下生成包含这些依赖包的 node_modules，就像运行 composer...这样一来，我们就可以在项目中基于 Laravel Mix 管理前端资源了。下篇教程，我们将基于 Laravel Mix 为博客项目替换主题。（全文完）

1.6K2 0

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

vux-loader --save npm install less-loader --save 安装完成后我们还需要将 webpack.config.js 文件提出来 cp node_modules/laravel-mix.../node_modules/laravel-mix/src/index和 ..../node_modules/laravel-mix/src/builder/WebpackConfig 附加代码： /** * As our first step, we'll pull in the.../node_modules/laravel-mix/src/index'); // 修改路径 require(Mix.paths.mix()); /** * Just in case the user.../node_modules/laravel-mix/src/builder/WebpackConfig'); //修改路径 module.exports = new WebpackConfig().

1.4K2 0

Laravel中运行Gulp任务的利器（一） —— Laravel Elixir简介及入门教程

在该文件中，可以看到一个Gulp任务示例： elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件，在本例中该文件名为.../css 目录下。...当然，要使用 app.css 文件中的样式，还需要在布局视图中引用它：记住，默认情况下，Elixir并不会压缩编译的...CSS文件，你可以通过添加 --production 选项到 gulp 命令来压缩CSS： $ gulp --production 编译JavaScript资源你可能还想要管理JavaScript资源...) { mix.less('app.less'); mix.coffee();}); 此外，你还可以直接使用方法链到命令上： elixir(function(mix) { mix.less

2K9 1

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

因为近几年来大部分时假在与 Laravel 打交道，使用 laravel-mix 已成家常便饭，所以想着总结并分享一下 laravel-mix 工作流中的自动刷新之道。...Browsersync /** *下面方法启用 bs，不传参则使用 laravel-mix 的默认配置 * 根据实际使用环境配置参数以获得更好体验 * bs 配置选项参考 https://www.browsersync.io...要在 laravel-mix 中使用 hmr，不需要安装其它额外的依赖包。...安装依赖 // laravel-mix v4 yarn add -D webpack-livereload-plugin // laravel-mix v3 或更早 yarn add -D webpack-livereload-plugin...打开页面，修改页面引用的前端资源（如 js,css）并保存，页面将自动刷新因为使用 laravel-mix 编译，一般修改 resource/ 目录下的文件，但实际上直接修改 public/ 目录中的文件也是可以触发刷新的

2.4K2 0

【玩转腾讯云】已有laravel 添加vue

": "^1.1.6", "laravel-elixir-vue-2": "^0.3.0", "laravel-elixir-webpack-official": "^1.0.10", "laravel-mix...'); require('laravel-elixir-webpack-official'); require('laravel-elixir-vue-2') elixir((mix) => { mix.sass...('app.scss') .webpack('app.js'); }); webpack.mix.js let mix = require('laravel-mix'); mix.js('...时候设计图上文字大小多少像素就写多少像素即可 cnpm install axios --save 第二 laravel-mix使用postcss-px-to-viewport 在webpack.mix.js...中添加 mix.js('resources/assets/js/app.js', 'public/js') .postCss('resources/assets/css/app.css', 'public

3.6K3 0

在 Laravel 项目中使用 webpack-encore

看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉，有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。...正所谓爱之深，责之切，在对 laravel-mix 表示失望之后，我翻出了自己 star 多时的另一包 webpack-encore，虽说很早就 star 了，但之前却没试用过它，可能也是因为对于 laravel-mix...而我迁移的这个项目，是一个 Laravel 项目，所以下面就分享下，如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...中 develop 等相关的脚本都是使用 laravel-mix 的，为了方便日常开发，现在要对它们进行一些调整，改用 webpack-cocore。...总之，如果你已经发现了 laravel-mix 的种种不足但又苦于没更好选择的话，不妨试试 webpack-encore，相信你会对它爱不释手。

2.1K2 0

【Laravel系列7.8】广播系统

在初始化时选项的内容都是很简单的英文啦，相信各位大佬的英文水平是没问题的。然后我们找到在当前目录下生成的 laravel-echo-server.json 文件，修改 devMode 为 ture 。...修改完成之后，我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码，最后需要加载的文件实际上是 public/js/app.js ，直接使用下面的命令行进行编译即可。...('css/app.css')}}" rel="stylesheet"> ... 接下来重新编译 mix 。...EIO=3&transport=websocket&sid=NTZrvzpCSmX_kuuVAAAB 好了，去刷新一下广播页面发送广播吧，然后来到测试页面看看 Console 中是不是有输出了。

2.3K2 0

页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面

基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中，我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，开始之前，先安装 laravel-mix-tailwind...这个前端依赖包： npm install laravel-mix-tailwind --save-dev 安装完成后，需要在项目根目录下的 webpack.mix.js 中引入它： const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .tailwind...(); 由于 laravel-mix-tailwind 依赖 tailwind.js，所以还需要通过如下命令初始化 Tailwind： npx tailwindcss init 如果上述命令运行报错

2.7K2 0

laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

如今laravel来到5.4版本，更方便引入vue了，具体步骤如下： 1.下载laravel5.4 2.命令行（laravel5.4目录下）：composer install 3.新建.env文件，把....watch" }, "devDependencies": { "babel-core": "^6.20.0", "babel-loader": "^6.2.9", "css-loader...vue-template-compiler": "^2.1.4", "axios": "^0.15.2", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.0", "laravel-mix...css' } ] } }); mix.sass('app.scss') .webpack('app.js...中有一个更简单的方法，是使用Mix，配置详情请参照 http://laravelacademy.org/post/6798.html

1.6K3 0

Laravel框架下载，安装及路由操作图文详解

然后更改文件名为laravel ? 然后我们在网页输入 ?...目录五：public 前端控制器和资源相关文件（图片、JavaScript、CSS） ? 目录六：resources 应用资源 ?...这里要注意的是，post不能直接输出到页面上，否则会报错多请求路由的使用方法 1.match自定义获取方式 Route::match(['get','post'],'m',function(){...路由输出视图 Route::get('view',function(){ return view('welcome'); }); 效果如下图: ?...storage/framework 目录被用于保存框架生成的文件及缓存 storage/logs 应用程序的日志文件 tests 应用测试相关文件 vendor Composer 依赖模块 webpack.mix.js

4.6K5 1

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

Mix 工具，这会节省大量前端配置时间根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...= `${ rs_root }/css`; // css 源目录 const css_output = `${ rs_output }/css`; // css 打包目录 mix.webpackConfig...css_entry }/app.scss`, `${ css_output }/app.css`); // 公共 CSS mix.setPublicPath(rs_output); mix.setResourceRoot... 1 2 3 4 5 6 7 8 9 10 11 # laravel-mix...配置 const path = require('path') const mix = require('laravel-mix') const rs_root = 'public/mix/resources

1.2K2 0

将博客主题替换成 Clean Blog

，通过 Laravel Mix 来编译打包这些预处理 js 文件： const mix = require('laravel-mix') mix.js('resources/js/app.js', '...public/js'); 上述代码的含义是引入 Laravel Mix，然后通过它提供的 js 方法将 resources/js/app.js 进行编译打包，然后将处理后的 app.js 文件分发到...然后在 webpack.mix.js 中补充对应的处理逻辑： const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public.../js') .sass('resources/sass/app.scss', 'public/css'); mix.copy('node_modules/@fortawesome/fontawesome-free.../css/all.css', 'public/css/fontawesome.css') mix 支持流式 API，所以可以直接以方法链的形式调用 sass 方法将 resources/sass/app.scss

7332 0

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

为了解决上述问题，出现了很多 CSS 预编译语言，CSS 预编译语言是基于 CSS 语言的语法扩展，除了能解决上述缺乏语言特性带来的问题之外，还支持嵌套书写，减少重复输入父级选择器（可理解为 CSS 中的继承机制...libSass，NPM 扩展包 node-sass 就封装了对 libSass 的实现，所以我们可以通过安装这个前端扩展包来编译 Sass 文件，不过在 Laravel 项目中，开箱提供了 Laravel...Mix 进行前端资源的编译，当我们通过 npm install 安装 laravel-mix 的过程中，系统会自动安装 laravel-mix 声明的依赖，其中就包括了编译 Sass 所需要的 node-sass...，我们无需再额外安装这个扩展包，这些事情 Laravel Mix 在底层默默帮我们完成了。...Mix 编译的时候将其编译到指定的 CSS 文件中。

7.1K4 1

docker学习系列11 多阶段镜像构建

as 关键字用来为构建阶段赋予一个别名，这样，在另外一个构建阶段中，可以通过 from 关键字来引用和使用对应关键字阶段的构建输出，并打包到容器中。...在多阶段构建完成之后，输出的镜像仅仅包含了最终输出的my-server应用，没有其他的源码文件和第三方源码包，非常的干净和简洁。因为 build-env 阶段只是一个构建的中间过程而已。...vendor/ COPY --from=frontend /app/public/js/ /var/www/html/public/js/ COPY --from=frontend /app/public/css.../ /var/www/html/public/css/ COPY --from=frontend /app/mix-manifest.json /var/www/html/mix-manifest.json.../multi-stage-docker-builds-for-laravel

8112 0

为什么 Laravel 会成为最成功的 PHP 框架？

在近几年对PHP框架流行度的统计中，Laravel始终遥遥领先。那么是什么让Laravel成为最成功的PHP框架？...Laravel以其简洁、优雅的特性赢得了大家的广泛关注，无论是专家还是新手，在开发PHP项目的时候，都会第一时间的想到Laravel。本文我们将讨论为什么Laravel会成为最成功的PHP框架。...Laravel自带对本地用户的身份验证，并可以使用“remember” 选项来记住用户。它还可以让你例如一些额外参数，例如显示是否为活跃的用户。...程序接口，我们可以使用Elixir定义可精简CSS 和JavaScript的预处理器。...elixir(function(mix) { mix.browserify('main.js'); }); 加密一个安全的应用程序应该做到可把数据进行加密。

3.8K9 0

Love beautiful code? We do too.

2011年，Taylor Otwell首次将Laravel带给这个世界，彼时，Laravel就是一个全新且现代的框架。...Lumen使用最小的配置集成了Laravel的所有重要特性，你可以通过将代码复制到Laravel项目来实现框架的完整迁移。 <?...Laravel自带对本地用户的身份验证，并可以使用“remember” 选项来记住用户。此外你还可以引入一些额外参数，例如是否是活跃用户。...API，我们可以使用Elixir定义预处理器来压缩CSS 和JavaScript。...elixir(function(mix) { mix.browserify('main.js'); }); 加密一个安全的应用应该做到可以对数据进行加密。

3K2 0

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

我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法，其中就有涉及 hmr（Hot Module Replacement...对于 Laravel 官方首推的 Homestead 当然也是可以的，只不过用法上有些差别，于加上 laravel-mix 本身的一些 BUG（在 issue 里搜索 hmr 结果就有好几页 :smile...true ignored: /node_modules/, }, }, }) 这一配置很关键，因为要是仅使用 devServer 的默认 watch 选项...，对于虚拟机环境是无效的（见 webpack 文档[2]）调整 hmrOptions mix.options({ hmrOptions: { host: 'laravel.test...References [1] 《让 F5 歇一会儿——laravel-mix 自动刷新之道》: https://tianyong90.com/2019/04/12/rang-f5-xie-yi-hui-er-laravel-mix-zi-dong-shua-xin-zhi-dao

1.6K1 0

laravel asset()函数

asset() 使用当前请求的scheme（HTTP或HTTPS）为前端资源生成一个URL： $url = asset('img/photo.jpg'); laravel自带了laravel-mix，用于对...js、css、图片等静态资源进行打包。...app.asjduiik2l1323879dasfydua23.js, 即js原文件名+hash+.js后缀，因为中间的那个hash是随时会变化的，所以在页面引入js文件的时候，就不能写死文件的路径，而是使用mix...('app.js')，此时laravel会自动去匹配当前的app.js对应哪个app+hash+.js的文件（项目public目录下会有一个mix-manifest.json, 这里面保存了两者的对应关系

4821 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭