开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Laravel scss npm run dev -无法解析'../images/bg-main.png‘

问题：Laravel scss npm run dev -无法解析'../images/bg-main.png'

回答：这个问题是在使用Laravel框架进行前端开发时遇到的一个错误。该错误提示无法解析'../images/bg-main.png'，意味着在编译SCSS文件时无法找到指定的背景图片。

解决这个问题的方法如下：

确保路径正确：首先，检查路径'../images/bg-main.png'是否正确。确保该路径指向正确的背景图片文件。可以通过查看文件系统中的目录结构来确认路径是否正确。
检查文件存在性：确认背景图片文件'bg-main.png'是否存在于指定的路径中。如果文件不存在，可以尝试重新上传或复制该文件到正确的路径。
检查编译配置：在Laravel中，SCSS文件通常是通过npm run dev命令进行编译的。确保在package.json文件中的scripts部分，dev命令对应的是正确的编译配置。可以检查是否有类似于以下的配置：
检查编译配置：在Laravel中，SCSS文件通常是通过npm run dev命令进行编译的。确保在package.json文件中的scripts部分，dev命令对应的是正确的编译配置。可以检查是否有类似于以下的配置：
确保以上配置中的webpack.config.js文件路径正确，并且配置中没有错误。
检查资源文件加载：在SCSS文件中，确保正确引用了背景图片。可以使用相对路径或者使用Laravel提供的asset()函数来引用图片。例如：
检查资源文件加载：在SCSS文件中，确保正确引用了背景图片。可以使用相对路径或者使用Laravel提供的asset()函数来引用图片。例如：
或者
或者
确保路径和文件名正确，并且在编译时能够正确加载图片资源。

如果以上步骤都没有解决问题，可以尝试重新安装相关依赖包或者更新Laravel框架版本。如果问题仍然存在，可以查阅Laravel官方文档或者在Laravel社区中寻求帮助。

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

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse

相关搜索:Laravel 5.8 npm run dev生成ENOENT错误如何在laravel 7上运行"npm install && npm run dev？laravel npm run dev给出错误“未安装webpack”无法为Laravel 5.6安装npm dev / npm watch 安装Laravel 8时运行"npm install && npm run dev“时出错 npm run dev无法识别新的sass分区格式 Laravel，在全新安装上运行npm run dev时出错如何在cpanel I中运行"npm run dev“处理laravel项目 Laravel 5.4 npm run dev错误:错误:找不到模块'lodash._baseclone‘Laravel "npm run dev“抛出"const envVars = {...process.env}”意外令牌问题在新的Laravel安装上运行NPM run dev时出现问题下一步，JS在运行npm run build时无法解析fs 模块构建失败(从./node_modules/babel-loader/lib/index.js) -尝试运行npm run dev for laravel mix

相关搜索:

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

有帮助

没帮助

相关·内容

在 Laravel 项目中使用 Bootstrap 框架

对于 Bootstrap 所需 CSS 文件，会在 resources/sass/app.scss 中引入： @import '~bootstrap/scss/bootstrap'; 从 Laravel...运行 npm install 会在项目根目录下新增一个 node_modules 目录，并将项目依赖的所有 JavaScript 库安装到该目录下，其中就包括 bootstrap： 3、运行 npm run...dev 编译前端资源接下来，我们就可以运行 npm run dev 命令通过 Laravel Mix 来编译前端资源了，该命令定义在 package.json 中：该命令最终运行的是 npm run...npm run watch 命令。...app.scss 中编写代码，引入其它模块，然后运行 npm run dev 就可以了，无需任何额外配置。

3.4K3 1

Laravel Mix 初探

Laravel 上面的安装 Laravel 5.4 以上默认已经安装了 Laravel Mix，在开发机配置了node 和 npm的基础上，仅仅只需要运行下面的命令即可安装： npm install...npm run dev 这个命令仅仅用于产生一个生产就绪的构建文件，并没有把我们静态资源进行压缩，不可发布到线上。...npm run watch 基本和npm run dev构建出来的文件一样，但是可以监测到静态资源文件的变化并且自动构建更新静态资源。...npm run watch 命令的时候 Browsersync 会启动一个localhost:3000的服务。...:3000 的请求就会发送到 my-domain.dev npm run hot 当一段JavaScript被改变时，不仅会刷新页面，还会在浏览器中维护组件的当前状态。

4.3K6 0

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

('app.scss') .webpack('app.js'); }); webpack.mix.js let mix = require('laravel-mix'); mix.js('.../page/Detail.vue') }]; a php artisan serve npm run watch Error: Can't resolve 'vue-route' in cnpm install...run watch 会报错缺少插件，类似这种安装 cnpm install postcss-viewport-units --save-dev vue加载优化安装： cnpm install -...(), ], }).js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', '...public/css'); 运行 npm run dev 参考： https://learnku.com/articles/9054/laravel55-vue-development-single-page-application

3.6K3 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...，提示 Connot find module 'autoprefixer'：可以通过升级 npm 版本（以 Mac 为例）来解决： brew upgrade npm 再继续运行初始化命令，就可以执行成功了...run watch 编译成功，则表明 Tailwind CSS 框架已正常引入。..."> <img src="/<em>images</em>

2.8K2 0

Laravel 前端资源配置教程

最近在学Laravel，遇到前端资源加载的问题，记录一下。一、前端共用资源的配置 1. webpack.mix.js //一般不太更动，透过以下两个档案讲所需资源加载。...mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css...'); 2. npm 命令安装前端套件资源(以jquery-ui为例) npm install jquery-ui --save-dev // --save-dev 为加入到package.json：...// vue所有页面共用，可以在app.js初始/启用 6. npm编译 npm run dev #resource档案夹下的资源需要编译才会生效二、各页面私有资源 1....</div @endsection 以上这篇Laravel 前端资源配置教程就是小编分享给大家的全部内容了，希望能给大家一个参考。

1.2K5 2

(1224) css进阶：sass文件的打包和分离

1.安装sass打包的loader 这里需要在项目目录下用npm安装两个包。...--save-dev node-sass 1.2 sass-loader npm install --save-dev sass-loader 注意：在用npm安装时，这个loader很容易安装失败，...3.新建文件 3.1 scss文件建立注意这里建立的文件格式是scss格式的。...6.启动服务使用命令npm run server 启动服务。 npm run server 效果为： ?.../'//图片打包到images下 } } ] },

1.2K2 0

Webpack4 常用配置详解

，npm install webpack-dev-server后，增加配置项： devServer: { contentBase: '....' } 运行npm run start即可热加载网页识别打包 js 文件,编译 es6 当打包 js文件时需要配置模块规则识别 module: { rules: [{ test:...[ext]', // ext 是保留源文件后缀 outputPath: 'images/', // dist 目录下的images文件夹 limit: 10240...(eot/ttf/svg)$/, use: { loader: 'file-loader' } } ] } 识别打包css、scss文件 npm i...[ext]', outputPath: 'images/', limit: 10240 } } }, { test: /\.

1.5K3 0

给初学者的Gulp教程（译）

npm-init.png 一旦package.json文件创建后，我们可以使用下面命令行，在项目中安装Gulp $npm install gulp --save-dev 这时候，我们就将Gulp安装到项目里了...我们首先要安装Browser Sync： $ npm install browser-sync --save-dev 你或许会注意到，当我们安装Browser Sync时，没有gulp-前缀。...$ npm install gulp-cache --save-dev var cache = require('gulp-cache'); gulp.task('images', function(...$ npm install del --save-dev var del = require('del'); del函数接受一组node globs数组，告知那些文件夹需要删除。...$ npm install run-sequence --save-dev 这是一个使用run-sequence的任务队列的语法： var runSequence = require('run-sequence

4.3K2 0

用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

/styles/app.css' console.log($('#root').html('hello world')); 复制代码执行npm run build后，我们在浏览器中打开，即可看到jq...此时执行npm run build,我们可以看到代码已经进行了分割：当然只满足与css和js的打包还远远不够，我们项目中还会用到各种图片，字体图标，css预编译语言如less或者scss，由于这部分的安装比较简单.../build/webpack.dev.js", 复制代码我们执行 npm start，此时会自动打开浏览器，运行我们的项目。...此时我们执行npm run build，打包结束后将会生成2个html页面，对应的文件依赖也会引入，在浏览器中打开，亲测有效～这样，一个基本的多页面打包工具就开发完成了，不过还有几点优化：代码压缩，...未完成的优化点： vue文件内部style无法独立抽出样式，只能通过引入css文件的方式加载样式公用css文件问题：多页面打包时，如果都引入了同一个css，无法服用这个css，希望能将这个css文件作为一个公共模块单独引用

2.3K2 1

webpack教程：如何从头开始设置 webpack 5

"scripts": { "build": "webpack" } 现在可以运行它了: npm run build 现在在 dist 目录会生成一个 main.bundle.js 文件插件 webpack...Images 假设我们需要引用一张图片并直接导入到 JS 文件中，这样是无法正常工作的。为了演示，创建 src/ images 并向其中添加图像，然后尝试将其导入到index.js文件中。...— 解析 css import style-loader —— 将CSS注入到DOM中 npm i -D sass-loader postcss-loader css-loader style-loader...开发每次进行更新时都要运行npm run build，站点越大，构建所需的时间就越长，这样就十分的烦琐。...npm i -D webpack-dev-server 出于演示目的，我们可以仅将开发配置添加到正在构建的当前webpack.config.js文件中并对其进行测试。

2.2K1 0

55. Vue webpack的基本使用

image-20200302232506393 "scripts": { "dev": "webpack-dev-server" }, 下面执行npm run dev命令，如下： ?...image-20200302233314075 再次运行webpack-dev-server，如下： npm run dev ?...启动npm run dev来看看有无报错，如下： ? image-20200304080409169 那么只要修改一下路径为import './css/index.css'即可，如下： ?...image-20200307162416295 运行npm run dev启动服务，查看打包是否报错如下： ?...那么在执行npm run dev来启动服务看看，如下： ? image-20200307162444028 可以看到，浏览器已经正常显示图片了，使用网页元素看看图片是怎么样的，如下： ?

1.5K2 0

laravel 集成 vue3 的前端项目

cp .env.example .env php artisan key:generate npm install npm run dev (or if production npm run build...the Vite development server... npm run dev # Build and version the assets for production... npm run...build Vue 如果你想要使用 Vue 框架构建前端，那么你还需要安装 @vitejs/plugin-vue 插件： npm install --save-dev @vitejs/plugin-vue...base: null, // Vue 插件将解析绝对 URL 并将其视为磁盘上文件的绝对路径。.../vite.config.js -> laravel-demo/vite.config.js 安装依赖并运行 npm install npm run dev / npm run build 最后访问访问

3551 0

基于 Vue 测试套件引入 Mocha + Expect 测试 Vue 组件

你可以参照Vue 官方文档通过 NPM 安装相应的依赖包，不过这里为了方便后端程序员快速入门，我们绕过 Webpack 的繁琐配置，直接基于 Laravel Mix 引入 Vue 测试套件和 Mocha...项目根目录下运行如下命令初始化 Vue 测试套件相关的前端依赖： npm install --save-dev @vue/test-utils mocha mochapack jsdom jsdom-global...运行测试命令接下来，我们运行 npm run test 执行一次测试，由于还没有编写任何测试用例，所以测试通过：三、测试 Vue 单文件组件最后，我们编写一个测试用例来测试 laravel/ui...执行测试运行测试命令 npm run test 对上述测试用例进行测试，绿色代表测试通过：如果我们在测试用例中新增一个断言： expect(wrapper.find('.card-body')....html()).toContain('学院君'); 则运行 npm run test 会失败，红色表示测试不通过：我们可以按照错误提示去修改组件代码让测试通过。

1.4K4 0

将博客主题替换成 Clean Blog

2、下载相关依赖库这里，我们选择使用 Clean Blog 作为博客主题，这是一个基于 Bootstrap 框架的免费主题，不同于以往下载主题包及关联前端资源文件到本地再引入，我们现在可以直接通过 NPM...下载相关依赖： npm install --save-dev startbootstrap-clean-blog bootstrap jquery popper.js 3、JavaScript 脚本处理...接下来，在 resources/sass 目录下新建 app.scss，通过编写一段 Sass 代码引入 Clean Blog 样式代码（这里引入的都是 Sass 文件）： @import "~bootstrap.../scss/bootstrap"; @import "~startbootstrap-clean-blog/scss/clean-blog"; 引入的样式资源包含 Bootstrap 以及 Clean...5、编译前端资源文件完成以上编码后就可以在项目根目录下执行 npm run dev 编译打包前端资源了： ? 编译成功后，就可以在 public 目录下看到对应的新文件了： ?

7342 0

webpack4 入门

npm install webpack-cli --save-dev npm install webpack --save npx webpack index.js 源码地址 https://github.com...learn-webpack4/tree/master/5 如果一个项目下有两个webpack配置文件，可以通过如下命令指定具体的配置文件进行打包 npx webpack --config webpack.config.dev.js.../avatar.jpg'); console.log(avatar); 执行打包命令 npm run bundle 源码地址 https://github.com/lilugirl/learn-webpack4...root'); root.append(img); 源码 https://github.com/lilugirl/learn-webpack4/tree/master/10 使用sass-loader打包scss...: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader',

5383 0

在create-react-app中使用sass

Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。...现在，您可以将src/App.css重命名为src/App.scss并运行npm run watch-css。...$ npm install npm-run-all --save-dev # or $ yarn add npm-run-all --dev 最后，在不使用ejec命令的情况下，更改create-react-app...的webpack配置，我们使用react-app-rewired来处理，安装方式如下: $ npm install react-app-rewired --save-dev 在完成这些步骤之后，我们修改...现在运行run npm和npm run build同样构建了Sass文件。

2.9K2 0

2022-webpack5实战教程

/src/main.js" }, 执行打包命令npm run build 此时如果生成了一个dist文件夹，并且内部含有main.js说明已经打包成功了这个例子只是webpack自己默认的配置..."scripts": { "build": "webpack --config build/webpack.config.js" }, } 然后执行 npm run build，会得到如下结果...如果使用less来构建样式，则需要安装 npm i -D less less-loader 如果使用scss来构建样式，则需要安装 npm i -D node-sass sass-loader...run dev 区分开发环境和生产环境 development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。...": "webpack-dev-server --config build/webpack.dev.js --open" }, 开发环境运行npm run dev,打包npm run build

8693 0

webpack从零搭建开发环境

npx webpack 两种模式:开发环境生产环境 npx webpack --mode development 开发环境不会被压缩为了方便也可以这么写，使用 npm run 命令这个命令执行的时候默认会把...node_modules 的.bin 文件放到全局上，执行之后销毁npm run buildnpm run dev "scripts": { "build":"webpack --mode...style 标签插入到页面中 3.解析 css 需要两个 css-loader style-loader npm i css-loader style-loader --save-dev 转化什么文件...node-sass sass-loader npm i node-sass sass-loader --save-dev 匹配到scss结尾的文件使用sass-loader来调用node-sass处理...install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime 解析jsx npm i @babel

1.3K2 0

从零开始配置webpack(基于webpack 4 和 babel 7版本)

最简webpack配置首先初始化npm和安装webpack的依赖: npm init -ynpm install --save-dev webpack webpack-cli 配置 webpack.config.js...配置 webpack-dev-server webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力安装依赖: npm install --save-dev webpack-dev-server...--mode development 之后，我们就可以通过 npm run dev , 来启动服务。...安装依赖: npm install --save-dev style-loader css-loader 在 webpack.config.js 中增加 loader 的配置。...安装对应的依赖: npm install --save-dev less less-loadernpm install --save-dev node-sass sass-loader 在 webpack.config.js

6133 0

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

文章列表页这里我们引入了基于 Bootstrap 框架的 SB Admin 2 作为后台管理系统的主题，你可以从 Start Bootstrap 网站预览并下载这个主题，或者通过 NPM 来下载安装...： npm i startbootstrap-sb-admin-2 --save-dev 2、初始化前端资源文件 JavaScript 部分安装完成后，可以在 resources/js 目录下新建...用于定义后台管理系统的样式代码，这里引入 SB Admin 2 提供的 Sass 源代码即可： @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"...; 通过 Laravel Mix 编译前端资源做好以上准备工作后，就可以在 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript 和 Css 代码了： const mix...run dev 之后，我们就可以在视图模板中引入对应的前端资源文件了。

4.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭