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

laravel-mix / webpack,忽略要导出的sass加载文件(字体)

laravel-mix / webpack是一个用于前端开发的工具,它结合了Laravel框架和Webpack构建工具的功能。它可以帮助开发人员更高效地管理和构建前端资源。

在前端开发中,通常需要使用Sass加载文件(如字体),但有时我们希望在构建过程中忽略这些文件,以减少构建时间和文件大小。下面是如何在laravel-mix / webpack中忽略要导出的Sass加载文件(字体)的方法:

  1. 打开项目中的webpack.mix.js文件。
  2. 在该文件中,可以找到mix.sass()或mix.styles()方法,这是用于编译Sass文件的方法。
  3. 在该方法中,可以使用.exclude()方法来指定要忽略的文件或文件夹。例如,如果要忽略字体文件夹,可以使用以下代码:
代码语言:txt
复制
mix.sass('resources/sass/app.scss', 'public/css')
   .exclude('resources/fonts');
  1. 保存文件并重新运行构建命令(通常是npm run dev或npm run watch)。

这样,laravel-mix / webpack将忽略指定的字体文件夹,并在构建过程中不导出这些文件。

laravel-mix / webpack的优势在于它提供了简单易用的API和丰富的功能,使前端开发人员能够更轻松地管理和构建前端资源。它与Laravel框架紧密集成,可以方便地与后端代码进行协作开发。此外,laravel-mix / webpack还支持自动刷新、代码分割、资源压缩等功能,可以提高开发效率和网站性能。

laravel-mix / webpack的应用场景包括但不限于:

  1. Web应用程序开发:laravel-mix / webpack可以帮助开发人员管理和构建前端资源,提供更好的开发体验和性能优化。
  2. 前端框架开发:laravel-mix / webpack适用于各种前端框架,如Vue.js、React等,可以帮助开发人员构建和打包框架相关的资源。
  3. 静态网站开发:laravel-mix / webpack可以用于构建静态网站,提供资源合并、压缩和缓存等功能,提高网站性能。

腾讯云提供了一系列与laravel-mix / webpack相关的产品和服务,包括:

  1. 云服务器(CVM):提供可靠的云服务器实例,用于部署和运行laravel-mix / webpack项目。
  2. 对象存储(COS):提供高可用、高可靠的对象存储服务,用于存储和分发前端资源文件。
  3. 云监控(Cloud Monitor):提供全面的云资源监控和告警服务,帮助开发人员实时监控laravel-mix / webpack项目的运行状态。

更多关于腾讯云产品和服务的详细信息,请访问腾讯云官方网站:腾讯云

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

相关·内容

在 Laravel 项目中使用 Bootstrap 框架

/bootstrap'); 这样我们在编译前端资源时候就会将 Bootstrap 相关 js 文件加载进来。...Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用前端打包工具,Webpack 是目前最新、广泛使用前端资源打包工具(之前还有 Grunt、Gulp 等),能够以模块方式处理所有前端资源...,Laravel Mix 对其提供功能进行了封装从而避免后端开发人员大量编写 Webpack 配置命令,大多数时候我们需要在 resources/js/app.js 和 resources/sass/...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/

3.4K31

Laravel Mix 初探

| |__resorces/ | |__scripts/ # 源JS文件 | |__styles/ # 源Sass文件爱你 | |__src/ # 我们希望将文件夹“按原样”复制到公共目录中文件夹...| package.json webpack.mix.js 接下来写一个简单 Laravel Mix 配置文件, webpack.mix.js let mix = require('laravel-mix...常用case 版本控制和清理缓存 开发者经常会使用在编译后资源文件名加上时间戳或者是唯一token作为版本号,强迫浏览器加载全新资源文件,而不是缓存文件。...因此,你应该在你视图中使用 Laravel 全局辅助函数 mix 来正确加载名称被哈希后文件。...如果这个还是不能满足要求,你完全可以自定义你 Webpack 配置, 拷贝node\_modules/laravel-mix/setup/webpack.config.js 到你应用根目录,然后编辑你

4.3K60

引入 Laravel Mix 管理前端资源

引言 到目前为止,我们还是使用很原始方式引入前端资源文件 —— 在特定目录下存放完整 CSS、JavaScript 文件,然后在 HTML 文档中静态引入。...,以及 Less、Sass 等预处理语言编写模块化样式代码,然后通过 WebPack 对其这些前端资源进行编译、打包、压缩、分发,变成最终可用静态资源文件。...如果完整介绍并构建这样一套前端开发环境,需要引入很多额外篇幅和前端知识,好在 Laravel 生态提供了一个 Laravel Mix 组件,该组件对 Webpack 构建步骤做了封装,提供了一套非常简单流式.../bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"...", "lodash": "^4.17.13", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2", "sass-loader

1.6K20

在 Laravel 项目中使用 webpack-encore

看过我之前写过博客应该知道我一直是 laravel-mix 死忠粉,有好几篇文章都是关于它。每每提到 laravel-mix 时更是不吝溢美之词。...至于为什么放弃 laravel-mix,主要是因为它维护状况堪忧,不仅更新节奏缓慢,许多 Issue 久悬未决,更重要是,作者似乎将很多 bug 完全寄希望于 webpack5,哪怕有热心人士 PR...正所谓爱之深,责之切,在对 laravel-mix 表示失望之后,我翻出了自己 star 多时另一包 webpack-encore,虽说很早就 star 了,但之前却没试用过它,可能也是因为对于 laravel-mix...配置 webpack 在项目根目录下新建一个 webpack.config.js 文件并在其中配置 webpack-encore 功能(实际上它最终也是一个标准 webpack 配置文件),以最基本玩法为例...另外还有点让我先惊讶是,他们竟然对 watchOptions.ignored 默认值也考虑到了,默认忽略 /node_modules/,降低 CPU 占用。

2.1K20

Vue-cli4.5 脚手架学习超详细

一般用来存放不会改变静态资源和webpack文件和不支持第三方库 favicon.ico:默认图标 index.html:(vue脚手架有特定文件格式,打包时候会识别这些格式这个文件名不可改,如果改了...,运行时会报错 如果改,还需要修改相应配置文件才行) src:存放代码文件文件夹(在这个文件夹中进行开发、写代码) asscts:存储项目中静态文件(图片/字体/css等等) components...App.vue:项目的根组件(项目所展示页面) main.js:项目的入口文件 .gitignore:git忽略文件(因为git上传会忽略文件夹) babel.config.js:babel相关配置文件....js文件(与package.json文件同级): //配置信息 module.exprots = { //模块导出 //需要安装插件: devServer:{ //配置信息 port:... 复制代码 asscts文件夹: 存储项目中所有静态文件(图片及字体文件等等) 二、使用脚手架进行vue页面开发: 1.添加组件 views文件夹下添加Test.vue文件 components

77540

前端工程化(ES6模块化和webpack打包,配置Vue组件加载器和发布项目)

打包非js模块 通过loader打包非js模块:默认情况下,webpack只能打包js后缀名结尾文件,如果想要打包非js文件,需要调用loader加载器才能打包....Loader加载器包含 /* 1).less-loader: 处理.less相关文件 2).sass-loader: 处理.scss相关文件 3).url-loader:...webpack加载基本使用 打包处理css文件 /* 运行npm i style-loader css-loader -D 命令, 安装处理css文件loader */ 2....: /\.css$/,use: ['style-loader','css-loader'] } ] } // 其中, test表示匹配文件类型, use表示对应调用loader 注意 /*...'] } ] } } 打包样式表中图片以及字体文件 // 在样式表css中有时候会设置背景图片和设置字体文件,一样需要loader进行处理 // 使用url-loader

2.4K50

Vue 07.webpack

.gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff .woff2 模板文件 .ejs .jade .vue【这是在webpack...网页加载速度慢, 因为 我们发起很多二次请求; 处理错综复杂依赖关系 如何解决上述两个问题 合并、压缩、精灵图、图片Base64编码 可以使用之前学过requireJS、也可以使用webpack...,并读取这个文件导出配置对象,来进行打包处理 module.exports = { entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件...JS 类型文件,无法处理其它非 JS 类型文件,如果处理非JS类型文件,需要手动安装一些合适第三方 loader 加载webpack处理第三方文件类型过程: 发现处理文件不是JS文件...webpack.config.js配置文件 module: { // 用来配置第三方loader模块 rules: [ // 文件匹配规则,test正则匹配,use使用加载器 { test

76620

奇怪知识又增加了,梳理一遍都有哪些loader

Loaders webpack支持使用loader对文件进行处理,我们可以构建处理js之外任何文件,甚至可以用Node.js编写自己loader。 处理文件 raw-loader。...用于加载文件原始内容(utf-8) val-loader。将代码作为模块执行,并将其导出为 JS 代码 file-loader。将文件保存至输出文件夹中并返回(相对)URL url-loader。...像加载 JavaScript 一样加载 Elm 模板 html-loader 将 HTML 导出为字符串,需要传入静态资源引用路径 pug-loader 加载 Pug 和 Jade 模板并返回一个函数...DOM 中 css-loader 加载 CSS 文件并解析 import CSS 文件,最终返回 CSS 代码 less-loader 加载并编译 LESS 文件 sass-loader 加载并编译...SASS/SCSS 文件 postcss-loader 使用 PostCSS 加载并转换 CSS/SSS 文件 stylus-loader 加载并编译 Stylus 文件 Linting 和测试 mocha-loader

1.4K20

WebpackWebpack4.x 常用操作 | 案例 | 相关构建工具

/dist') //在哪里输出bundles }, output属性,则是告诉webpack在哪里(path)输出它所创建assets(或者说bundles),并告诉Webpack怎样命名这些文件...sass(scss)文件 、配置sourceMao 安装: npm i -D sass-loader node-sass webpack 添加loader module: { rules: [{...-loader 加载和转译 JSON 5 文件 cson-loader 加载和转译 CSON 文件 转换编译 html-loader 导出 HTML 为字符串,需要引用静态资源 pug-loader 加载...样式 style-loader 将模块导出作为样式添加到 DOM 中 css-loader 解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码 less-loader 加载和转译...LESS 文件 sass-loader 加载和转译 SASS/SCSS 文件 postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件 stylus-loader 加载和转译

23210

webpack超详细教程!入门一篇就够了

全局安装:(推荐) npm i webpack -g 项目根目录安装 npm i webpack --save-dev 4 简单使用 方法一:通过命令打包文件(不推荐) webpack 打包文件路径...就会解析执行这个配置文件,当解析执行完配置文件后,就得到了配置文件中,导出配置对象 当 webpack 拿到配置对象后,就拿到了配置对象中,指定入口和出口,然后进行打包构建 如果 webpack...} 注意: webpack 处理第三方文件类型过程 发现这个处理文件不是 JS 文件,然后就去配置文件,查找有没有对应第三方 loader 规则 如果能找到对应规则,就会调用对应 loader...'] } ] } } 12 处理 css 文件 url 地址 在默认情况下, webpack 是无法处理 css 文件 url 地址,不管是图片还是字体库...去打包到我们打包文件中 而我们通过 Babel,可以帮我们将高级语法转换为低级语法 在 webpack 中,必须装两套包,才能实现将高级语法转为为低级语法功能 第一套 babel-core

8.5K52

Webpack4 常用配置详解

') // 输出文件路径,必须是绝对路径,因此引用nodepath模块 } } SourceMap配置 Webpack打包后如果文件出错会把错误指向打包后文件某一行,而我们更需要知道是源文件哪一行出错...,方便快速查找错误 ; eval表示soucemap映射代码放到打包后js文件中,而不是生成source.map.js文件; souce-map指将错误映射到具体源文件上 热加载 当希望更改源文件时能自动重新打包文件有两种方法.../, // 忽略依赖插件目录识别 loader: 'babel-loader' // 但需要编译es6语法时需要引入babel }] } 编译es6用babel需要在根目录创建配置文件...,包括对应引用关系 options: { importLoaders: 2 } }, 'sass-loader', // 解析sass,注意安装时候安装node-sass...', // 解析sass,注意安装时候安装node-sasssass-loader 'postcss-loader' // 添加css前缀,要有postcss.config.js

1.5K30

Vue 脚手架项目分析

vue cli创建后目录.png build:webpack一些配置文件以及服务启动文件 config:多为build中所依赖文件 src: 页面以及逻辑文件夹 static: 字体以及公共样式文件夹....babelrc: es6编译文件配置,将es6编译为es5 .editorconfig: 编写风格配置文件,比如缩进文件格式等等 .eslintignore: 忽略检测一些文件格式,比如我们默认忽略检测..., // 导出文件文件名 filename: '[name].js', // 生产模式或开发模式下html、js等文件内部引用公共路径 publicPath: process.env.NODE_ENV...(), // 热更新插件 new webpack.NamedModulesPlugin(), //这个插件作用是在热加载时直接返回更新文件名,而不是文件id。...[chunkhash].js'), //导出文件名 chunkFilename: utils.assetsPath('js/[id].

1.7K40

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

laravel-mix 自称 An elegant wrapper around Webpack for the 80% use case ,其功能确实强大,它对于前端开发工作流考虑也是非常全面,可以通过...修改相关文件关保存,webpack 将会自动编译修改文件,完成之后页面将自动刷新。(如果修改是后端文件,则直接刷新) ?...安装依赖 // laravel-mix v4 yarn add -D webpack-livereload-plugin // laravel-mix v3 或更早 yarn add -D webpack-livereload-plugin...打开页面,修改页面引用前端资源(如 js,css)并保存,页面将自动刷新 因为使用 laravel-mix 编译,一般修改 resource/ 目录下文件,但实际上直接修改 public/ 目录中文件也是可以触发刷新...files 规则所包含前后端文件 前端模块(即 webpack 加载模块) 浏览器当前页面所加载前端文件 速度 修改 css 时较快,其它文件时一般 快,特别是热替换时 一般 可靠性 可靠 存在

2.3K20

vue 学习笔记第四弹 - Webpack

gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff .woff2 模板文件 .ejs .jade .vue【这是在webpack中定义组件方式...网页中引入静态资源多了以后有什么问题??? 网页加载速度慢, 因为 我们发起很多二次请求; 处理错综复杂依赖关系 3....中配置两个路径: // 导入处理路径模块 var path = require('path'); // 导出一个配置对象,将来webpack在启动时候,会默认来查找webpack.config.js...,并读取这个文件导出配置对象,来进行打包处理 module.exports = { entry: path.resolve(__dirname, 'src/js/main.js...使用webpack打包sass文件 运行 npm install sass-loader node-sass --save-dev 在webpack.config.js文件中添加处理sass文件

85120

webpack处理ttf字体文件报错方法

webpack处理ttf字体文件报错方法 我们在使用webpack打包时候经常因为引入ttf字体报错而烦恼,这里解决ttf字体报错方法需要加入一个url-loader,没有的话需要npm先安装下:...(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件 loader 完整webpack.config.js如下: // 由于 webpack...,同时自动把打包好bundle注入到页面底部 // 如果配置插件,需要在导出对象中,挂载一个 plugins 节点 var htmlWebpackPlugin = require('html-webpack-plugin...') // 当以命令行形式运行 webpackwebpack-dev-server 时候,工具会发现,我们并没有提供 打包 文件 入口 和 出口文件,此时,他会检查项目根目录中配置文件...] }, // 处理 less 文件 loader { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'

4.1K20

使用Webpack5创建Vue2项目及优化

sass-loader node-sass工具来处理sass文件 npm i sass-loader node-sass -D npm i sass fiber -D 在webpack.config.js...如果文件大于该阈值,会自动交给 file-loader 处理。 字体 不要把字体也用url-loader 来处理,把字体文件转成base64是浏览器无法识别的 { test: /\....对于某些代码,可能没有被导出和使用,但是却不能删除。 因为仅仅是引入这个文件(比如import '....webpack 默认支持,在生产环境下默认开启 只支持 es6 代码 优化运行时体验 运行时优化核心就是提升首屏加载速度,主要方式就是:降低首屏加载文件体积,首屏不需要文件进行预加载或者按需加载...maxAsyncRequests: 30, // 最大按需(异步)加载次数 maxInitialRequests: 30, // 打包后入口文件加载时,还能同时加载js文件数量(包括入口文件

2.6K10
领券