@apply在Laravel Mix中的Vue组件中不起作用
@apply是一个CSS预处理器中的指令，用于将一组CSS样式应用到一个选择器上。在Laravel Mix中的Vue组件中，@apply指令不起作用的原因可能是由于以下几个方面：
- 缺少CSS预处理器支持：Laravel Mix默认使用的是Sass预处理器，如果你想在Vue组件中使用@apply指令，需要确保你的项目中已经安装了Sass预处理器，并且配置了相关的loader。
- 未正确引入CSS预处理器文件：在Vue组件中使用@apply指令之前，需要先引入包含@apply指令的CSS预处理器文件。你可以在Vue组件的style标签中使用@import指令引入该文件。
- 未正确配置CSS预处理器：在Laravel Mix的配置文件中，需要正确配置CSS预处理器的loader，以确保@apply指令能够被正确解析和转换。具体配置方法可以参考Laravel Mix的官方文档或相关教程。
- Vue组件样式作用域问题：Vue组件的样式默认是具有作用域的，即只会作用于当前组件内部。如果你在Vue组件中使用@apply指令，但样式并没有被应用到相应的选择器上，可能是因为选择器不在当前组件的作用域内。你可以尝试使用/deep/或>>>选择器来穿透组件样式的作用域，将样式应用到目标选择器上。
总结起来，要在Laravel Mix中的Vue组件中使用@apply指令，需要确保正确配置了CSS预处理器的loader，并引入了包含@apply指令的CSS预处理器文件。同时，要注意样式作用域的问题，确保选择器在组件样式的作用域内。如果以上步骤都正确无误，但@apply指令仍然不起作用，可能需要检查其他可能的配置或代码错误。
相关·内容
1回答
使用Vueify的Laravel
、、、、
我正试图在我的第一个Laravel项目中使用Vueify，我不知道为什么它不起作用。我已经安装了(通过npm) vueify和laravel-灵丹妙药-vueify模块。
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
elixir(functi
浏览 2提问于2016-10-26得票数 1
回答已采纳
在我的项目中，当我使用<router-link>从一个页面移动到另一个页面时，JavaScript无法工作，请查看图像以理解我的意思。
当我第一次刷新页面时，一切都正常，但是当我进入测试页面(从localhost:8000/到localhost:8000/test)时，javascript不起作用，有人帮助我吗？
我的app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<link rel
浏览 9提问于2021-01-21得票数 0
回答已采纳
拜托，我试着在我的托管服务器上托管我的Laravel应用程序，但是它不起作用。
我从我的网络检查员那里得到了这个消息
DevTools failed to parse SourceMap: http://sample.com/myproject/js/bootstrap.js.map
app.js:107387 app vue
app.js:18929 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips
浏览 0提问于2018-08-09得票数 1
2回答
我想在我的Laravel项目中使用Vueify。我有不同的Vuejs组件使用Vueify (*.vue文件)。我的问题是如何最好地组织所需的文件，并优化发送到浏览器的JS代码。
基本上，我想直接在我的刀片模板中使用这些组件，其中包括我的Vue实例。但是由于我需要编译那个*.vue文件，所以我不能在模板中直接引用它们。有了这个，我是说做这样的事：
import Timeline from "./components/Timeline.vue";
我的刀片模板不起作用了。
因此，我为每个刀片模板创建了一个专用的JS文件，其中存储了包含组件的Vue对象。这感觉不太对劲。例如，它使我的
浏览 10提问于2016-08-11得票数 0
回答已采纳
我是新来拉拉维尔的webpack的。我已经设法将默认脚本编译成一个脚本。然而，当我尝试在一个单独的文件夹中添加一个新的Vue Controller时，它似乎不会包含在npm run dev中。
目前我有这样的设置
-assets
--js
---app.js
---test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/test.vue'
], 'public/js/app.js');
这将会起作用。但是，当
浏览 0提问于2018-08-18得票数 1
我将创建一个Laravel 8+ Vue JS 3混合项目，我已经设置了一切，但当我npm run watch时，有一个错误，如下所示。我尝试了各种方法来看待一些论坛，但仍然错误。有谁可以帮我？
在./ /js/components/index.js 6:2-15 导出'default‘(导入为'Vue')中没有发现(可能的导出: BaseTransition、注释、片段、KeepAlive、静态、悬念、传送、文本、转换、TransitionGroup、callWithAsyncErrorHandling、callWithErrorHandling、camelize
浏览 2提问于2021-04-13得票数 0
回答已采纳
App.js文件：
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
});
blade.php文件：
<!doctype html>
<html lang="{{ str_r
浏览 4提问于2021-07-10得票数 0
回答已采纳
1回答
我最近从Vue-CLI切换到laravel-mix，SCSS变量的用法在Vue-CLI中工作得很好，但在我切换到laravel-mix之后，现在似乎完全不起作用了。
Vue-CLI只是为我处理了所有的事情，我觉得我必须配置一些东西来让变量在laravel-mix中工作。
这是我尝试过的(也是在Vue-CLI中起作用的)：
// vue component
import variables from "@/styles/variables.scss";
// ...
data() {
return {
variables
}
}
methods:
浏览 1提问于2021-06-25得票数 0
1回答
我试图在我的vue和laravel项目上运行vuetify材料仪表板，在修改了用于laravel和npm的vuetify package.json和npm (默认为vue-cli)之后，运行npm dev或npm运行监视命令抛出此错误：
ERROR in ./resources/assets/js/router/index.js
Module build failed: SyntaxError:
C:/wa
浏览 2提问于2019-03-02得票数 1
如何在Elixir中混合复制多个文件？
这不起作用：
mix.copy([
['node_modules/vue/dist/vue.js', 'resources/assets/js/vendor/vue.js'],
['node_modules/vue-resource/dist/vue-resource.js', 'resources/assets/js/vendor/vue-resource.js']
]);
除以下内容之外的任何其他建议：
mix.copy('node_modules/vue/dis
浏览 0提问于2015-08-02得票数 4
我正在我的项目中编写一个使用Laravel Mix绑定的Vue单页面组件。我希望将一些逻辑提取到它自己的类中，以便可以轻松地在其他组件之间重用(但这不是应该是Vue组件本身的逻辑)。 我创建了一个新类，并将其放在TimeRangeConverter.js中，与我的Vue组件位于相同的目录中。 export default class TimeRangeConverter {
static getFromTimestamp() {
return 1;
}
} 在我的组件中，我像往常一样导入它： <template>
<div>
浏览 53提问于2019-02-03得票数 1
回答已采纳
我试图用Vue 2升级我的Laravel 8到Vue 3，我改变了我的package.json中的所有软件包，以支持新的Vue 3依赖项。我甚至不能用Vue 3编译一个简单的测试应用程序。当我试图构建的时候，我得到的错误是没有给我太多的信息。
当我试着“纱线手表”时，有人知道如何修正这个错误吗？
λ yarn watch
yarn run v1.22.5
$ mix watch
[webpack-cli] TypeError: Cannot read property 'resolve' of undefined
at Alias.register (c:\wamp\w
浏览 1提问于2021-01-08得票数 5
所以我的手表cmd有一个奇怪的问题，当我运行这个cmd时，它只会运行一次，之后没有错误，也没有变化。我使用的是带有VUE & tailwindcss的laravel 8。
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/web
浏览 1提问于2021-05-06得票数 0
我正在构建一个相对简单的laravel应用程序，并想学习Vue.js.变成了一个非常令人沮丧的烂摊子。
不管怎样，这是个问题。无论我做什么，我都会得到没有定义组件的错误。
这是我拥有的..。
Gulpfile
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
// Elixir Mixins.
elixir(function(mix) {
mix.sass('app.scss');
mix.browserify('mai
浏览 0提问于2016-09-16得票数 0
回答已采纳
我不想在vue中使用整个应用程序，而是希望在html标记中使用vue组件，但是我编写的代码不起作用。请帮帮忙
我执行了以vue开头的应用程序，但在这种应用程序中我需要帮助。
main.js
import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './HelloWorld.vue'
const app = createApp(App)
app.mount('#app')
index.html
<html>
浏览 4提问于2022-02-01得票数 0
我有一个模块化的模板，它使用Sass-loader编译每个组件都有的scss文件，但在laravel中使用它和laravel-mix将不起作用，这不会做任何事情 我在php7和Vue JS上使用最新版本的laravel (5.8) 组件示例： <template>
<div :class="$style.logo">
<div :class="$style.logoContainer">
<img
v-if="!set
浏览 50提问于2019-05-28得票数 1
我在Laravel8.x应用程序中工作，并且安装vue 2.6.12的时间最长。我的工作是升级到使用Vue 3与拉拉和Webpack正在使用。我已经更新了我的package.json脚本，并安装了以下Vue 3可兼容性代码：
{
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"w
浏览 10提问于2021-12-09得票数 2
回答已采纳
我想使用vue在我的laravel项目，它不工作，我安装了npm安装，这是vue和vue-模板也安装了。这是我的index.blade.php。
@extends('layouts.app')
@section('content')
<div id="app">
<p> {{ product }} </p>
</div>
@endsection
@section('scripts')
<script>
var app = new
浏览 0提问于2019-02-16得票数 0
回答已采纳
我已经在laravel中安装了vue，然后运行命令、npm、运行监视和php服务。但是当加载页面时，什么都不会出现。有什么问题吗？没有错误。
main.js
import { createApp } from 'vue'
import store from './store'
import './index.css'
import App from './App.vue'
createApp(App).use(store).mount('#app')
App.vue
<script setup>
//
浏览 8提问于2022-05-02得票数 1
1回答
我在Laravel有一个大项目，它有几个前端，取决于登录的用户。
我还有一个shared目录，其中有常见的组件(如表、模态等)。可用于不同的前端。
我希望将每个前端编译成一个不同的js文件，所以我只能包含每个用户的相关文件。
我现在拥有的：
webpack.mix.js：
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/frontendUser.js', 'public/js')
.js('resources/js/frontendA
浏览 0提问于2019-06-07得票数 3
Laravel 5.6.21
NPM 6.1.0
Node 10.5.0
Webpack 3.12.0
我的问题是如何正确地配置laravel-mix、webpack和babel，以便使用这里描述的方法成功地延迟加载vue组件：
更具体地说，使用阶段2 (es2018 ?)语法如下：
const Foo = () => import('./Foo.vue')
当尝试使用laravel-mix进行编译时，所有类似上述语法的语句都会生成错误(示例)：
Syntax Error: Unexpected token (1:24)
1 | const Dashboard =
浏览 1提问于2018-09-25得票数 2
1回答
我想用Vue & Laravel。为了避免不受样式限制的内容闪现，我想在Laravel中使用空间中的包。
然而，就我所理解的情况而言，只有当我将整个HTML代码放入一个app.vue文件中，而我的刀片最终只能是这样的时候，它才能起作用：
<html>
<head>
<title>My server side rendered app</title>
<script defer src="{{ mix('app-client.js') }}">
&l
浏览 1提问于2020-04-08得票数 0
对于所有这些现代框架，我正在尝试让这个javascript库在我的Vue组件中工作：
当混合运行时，我可以看到它集成到了我的public/js/app.js文件中，但是我似乎无法从我的.vue (组件)文件中引用它。
有谁能给我一个逐步的指南，如何使它集成到我的项目中，请：
资源/js/app.js文件
import './clipboard';
clipboard.js文件位于：
资源/js/clipboard.js
混合webpack.mix.js文件：
mix.js("resources/js/app.js", "public/js")
浏览 11提问于2022-06-28得票数 0
2回答
Laravel混合转译依赖
、、、、
我正在尝试在一个laravel mix项目中使用库(使用typescript)。但我一直收到错误Uncaught TypeError: Class constructor VuexModule cannot be invoked without 'new'。这似乎是一个，可以通过将transpileDependencies: ['vuex-module-decorators']添加到我的vue.config.js文件中来解决，这将告诉babel转译该包。
因为我使用的是laravel mix，所以添加一个vue.config.js文件不会做任何事情。我不知道如何
浏览 2提问于2018-11-17得票数 2
2回答
我正在尝试将我的app.scss导入到我的application.vue中，但是我一直得到别名sass不被识别的错误。我在网上查看了如何将别名添加到我的混合文件中，我有以下webpack.mix.js。在vue组件中，我有以下代码
<style lang="scss">
@import 'sass/app.scss';
html, body{
margin: 0px;
padding: 0px;
background-color: $secondary-color;
}
<
浏览 4提问于2020-01-20得票数 5
我目前正在使用Laravel与Vue js与顺风css。它似乎尾风@apply一直显示未知的属性名称。
以下是我的Vue文件
<template>
<Head title="My Team" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-ti
浏览 8提问于2022-05-30得票数 0
我已经尝试了我能想到的一切，但是尽管没有构建错误，但我不能让Vue组件在我非常简单的项目中加载。我不明白为什么，但我只是得到一个空白的网页时，试图查看拉拉维尔发球。
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta nam
浏览 11提问于2022-04-03得票数 0
回答已采纳
我在Laravel项目中使用Vue.JS完成了基本安装，这是我的package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_mo
浏览 3提问于2020-02-01得票数 0
1回答
我在拉勒维尔用的是vuetify。我使用laravel/ui包创建了一个vue版本2的laravel 8项目。一切看起来都很好，所有的成分都呈现得很好。但是，当我试图在resources/sass/variables.scss中更改resources/sass/variables.scss中的变量时，它似乎不能相应地工作。例如:当我想将默认的边框半径从4px更改为允许使用10 4px时，请使用$border-radius-root: 6px;，如vuetify文档中所提到的。它不起作用。下面是我的webpack.mix.js
const mix = require("laravel-m
浏览 2提问于2021-11-12得票数 1
我想在Laravel Mix中使用自动补全。我看到的教程使用的是vue-cli，并且它是有效的。它使用顺风，但当我使用npm install在Laravel Mix中实现它时，它不起作用。我使用教程在Laravel Mix中安装了Tailwind，但在resources/js下找不到tailwind.js。如果我想写一本手册，我如何在下面写这些文件链接教程。
浏览 0提问于2019-10-28得票数 1
我对jquery的安装和使用步骤感到有点困惑。Jquery已经在package.json中了 "devDependencies": {
"jquery": "^3.2",
"laravel-mix": "^4.0.7", 我的拉瓦尔混合看起来像下面这样。 mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/
浏览 38提问于2019-03-19得票数 3
我有一个laravel 8项目，并将laravel-mix升级到v6以支持vue 3。
问题出在vue- createWebHistory 4的路由器
package.json
{
"private": true,
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options
浏览 11提问于2020-12-02得票数 1
我用Laravel vue2开发了一个应用程序。当我用运行它时，我的应用程序工作得很好。因为我想做SSR，我增加了惯性，编辑了下面的代码，但是样式在我的应用程序中不起作用，我不能导入任何东西。
我开始这个项目的步骤；
npm运行程序
npx mix -config=webPack.ssr.Mix.js
节点public/js/ssr.js
-
app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<
浏览 4提问于2022-05-26得票数 0
我使用的是默认的Laravel 5.3设置--这是Vue.js 2.0的默认配置的全新安装。
使用browserify 5.1和Larave1.x，我可以很容易地定义像这样的组件，并使用Laravel进行编译。
Vue.component('test-component', require('./test-component');
/* test-component.js */
export default{
template:require('./test-component.template.html')
}
/* test
浏览 44提问于2016-12-13得票数 4
回答已采纳
我希望在Laravel5.8项目中使用VUE.JS中的别名来导入模块中的css和js。
webpack.mix.js
mix.webpackConfig({
resolve: {
alias: {
'alias': path.resolve(
__dirname,
'~myModule/src'
)
}
}
});
在我的VUE App.js中，我想导入css文件夹，我写道：
资源/js/app.js
// css files
import 'ali
浏览 0提问于2019-04-25得票数 1
从Vue.js开始，并想尝试一下laravel的例子。
没有显示组件，在控制台中我得到
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Example>
<Root>
不是新安装，从5.2->5.3->5.4升级
资源/资产/js/app.js
/**
* First we will load all of this project's JavaScript dependencies whic
浏览 6提问于2017-09-07得票数 20
回答已采纳
1回答
我在我的项目(维尔特堆栈)中使用CKEditor 5时遇到了问题
I可以将问题描述如下:
这是我的vue文件：
<template>
<app-layout>
<ckeditor :editor="editor" @blur="onEditorInput" v-model="editorData" :config="editorConfig"></ckeditor>
</app-layout>
</template>
浏览 4提问于2021-01-27得票数 0
回答已采纳
我使用Laravel编译我的Vue组件，为此，我使用了TypeScript和基于类的组件。每个类都是从组件导出的，每个组件都是主应用程序脚本中的上下文所要求的，但在呈现Vue抛出错误时是这样。
Uncaught TypeError: Cannot set property 'render' of undefined
at normalizeComponent (componentNormalizer.js:24)
我搜索了所有的互联网，但人们只谈论无效的导出类。我确信组件中的有效导出类。我不知道我做错了什么。
当我回到普通JavaScript中基于对象的组件时，一切都变
浏览 3提问于2020-05-20得票数 0
回答已采纳
4回答
我用vue-cli和webpack和Laravel。在我的jQuery中从cdn加载js文件是可行的，但是我不想包含来自cdn的文件.
使用
require('@/js/assets/jquery.js');
在app.js中不起作用。在我的浏览器中查看已编译的app.js时，jQUery似乎是导入的，但我说"$是未定义的“时出错了。
我尝试在我的vue应用程序中添加的每一个js /css文件都是一样的。
app.blade.php：
<!DOCTYPE html>
<html>
<head>
<
浏览 1提问于2019-02-11得票数 2
回答已采纳
当涉及到使用vue js时，我和一位同事在新的和旧的laravel项目中遇到了问题，因为每次在浏览器控制台中都会收到以下错误
>`[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Example>
<Root>
warn @ app.js:32173
mountComponent @ app.js:34241
Vue$3.$mount @ app.js:39678
Vue$3.$mount @ app.js
浏览 3提问于2017-09-20得票数 0
回答已采纳
我找了又找，似乎找不到解决我的问题的办法。 我采取了以下步骤： \\Webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
});
mix.js(
浏览 73提问于2021-04-25得票数 0
我遵循了laravel-mix文档，通过使用extract(' vue )方法来减小我的vue应用程序的大小，它工作得很好，但是当我尝试使用异步组件时，它将不能正常工作。
我已经添加了babel来启用promise语法
mix.js('resources/js/app.js', 'public/js').version().extract(['vue'])
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plu
浏览 1提问于2019-10-28得票数 0
我正在尝试将代码从我的vue文件分割成一些只在特定路由中使用的较小的文件。
例如，我有一个mobile.vue组件，它只在用户使用移动设备时才会出现。
最初，如果我不拆分代码，这就是我如何将vue component转换成app.js的方法
require('./bootstrap');///typical for laravel to have a bootstrap.js for other pages.
window.Vue = require('vue');
Vue.component('v-mobile', require('
浏览 0提问于2018-07-26得票数 3
我安装了gruhn/vue-qrcode-reader包来读取二维码。
这是我的qrscan.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/cs
浏览 3提问于2018-06-01得票数 9
我有一个Laravel应用程序，它使用webpack编译一些SASS资产。
mix.js('resources/js/vue/User/dashboard.js', 'public/js/User')
.js('resources/js/vue/home.js', 'public/js')
.js('resources/js/vue/admin-dashboard.js', 'public/js/admin')
.sass('resources/sass/app.scss', &
浏览 0提问于2019-07-21得票数 4
回答已采纳
在我的Laravel项目中，我有一个近乎普通的webpack.mix.js和资源/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');
资源/js/app.js：
require('./bootstrap');
window.Vue =
浏览 2提问于2019-09-26得票数 1
回答已采纳
我使用vuejs在Laravel5.7建立一个SPA。我用mocha-webpack和vue-test-utils编写了一些vue组件测试。
测试似乎无法将样式表导入到组件中。例如:我有一个ExampleComponent.vue，它包括以下内容：
</script>
<style lang="scss" scoped>
@import '@/_variables.scss';
.subpanel-control > ul > li {
background-color: lighten($body-bg, 50
浏览 9提问于2019-11-08得票数 0
回答已采纳
我知道有很多类似的问题，但我无法从这些问题中找到解决办法。
已经安装了vue的npm并成功地使用npm run dev编译，我不知道它为什么会在下面返回这样的错误。
ReferenceError: Vue未定义
这是我在app.js中的设置
import Vue from 'vue';
import VueRouter from 'vue-router';
window.Vue = Vue;
Vue.use(VueRouter);
new Vue({
el: '#app',
router
});
在我的welcome.bl
浏览 1提问于2020-03-16得票数 0
回答已采纳
我一直在试着用拉拉混音、拉拉混音和拉拉混音来训练Webpack .但我一直面临着用百乐乐混合临界汇编它的问题。如果我在webpack.mix.js中评论criticalcss，它可以正常工作，但是使用criticalcss会抛出一个错误。我已经升级了npm和所有软件包，但是每当我试图编译webpack时，它都会抛出以下错误：
mix.js(...).options(...).postCss(...).options(...).sass(...).sass(...).criticalCss不是 webpack-cli TypeError：
我在webpack.mix.js中包括了laravel
浏览 9提问于2022-03-17得票数 0
所以我做了所有类似于这个视频的事情，但是在那之后我得到了一个错误：
:(“./resources/js/app.js 4:0-28模块未找到:错误:无法解决'./vue/app‘)
这是我的/resources/js/app.js文件
require('./bootstrap');
import Vue from 'vue';
import App from './vue/App';
const app = new Vue(
{
el: '#app',
components
浏览 1提问于2021-09-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
