首页
学习
活动
专区
工具
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.4K60

    在 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

    引入 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

    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

    83540

    前端工程化(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.6K50

    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

    78920

    【Webpack】Webpack4.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 加载和转译

    28310

    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

    9.8K52

    奇怪的知识又增加了,梳理一遍都有哪些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

    Webpack4 常用配置详解

    ') // 输出文件路径,必须是绝对路径,因此引用node的path模块 } } 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-sass,sass-loader 'postcss-loader' // 添加css前缀,要有postcss.config.js

    1.5K30

    让 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.4K20

    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.8K40

    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文件的

    87320

    使用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文件的数量(包括入口文件

    3K10
    领券