Vue组件在laravel中不能使用scss

Posted 2023-02-23

【中文标题】Vue组件在laravel中不能使用scss

【英文标题】：Vue components can't use scss in laravel

【发布时间】：2020-01-18 05:02:55

【问题描述】：

我想在单个.vue 组件中全局使用.scss 文件

我用gulp（laravel-elixir编译sass/scss，没问题。我可以在 Laravel Blade 的任何地方做所有样式：

elixir((mix) => 
.sass('events/test/test.scss', 'public/css/events')
.compass('app.scss', 'public/css', 
style: 'nested',
sass: 'resources/assets/sass',
image: 'public/images',
javascript: 'resources/assets/js',
sourcemap: true,
comments: true,
relative: false,
)

但痛点是单一的“Vue组件”我在Laravel 5.3中写的（重点是忽略错误的部分。）：

<template></template>
<style lang="scss" >
</style>
<script></script>

我尝试了这些方法来解决这个问题，但是还是卡住了：

npm install -D sass-loader node-sass（SASS & SCSS, RefUrl：https://vue-loader.vuejs.org/guide/pre-processors.html#sass）

在带有 Laravel Mix 的 Vue 组件中使用 SASS（RefUrl：https://serversideup.net/using-sass-vue-components....../）

google & *** 任何答案我做了很多方法...

＊终端错误日志：

找不到模块：错误：无法解析 /xxx/xxx/xxx/Test.vue 中的“scss-loader”

＊package.json（main）：

"sass-loader": "^4.1.1",
"scss-loader": "0.0.1",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.1.0",
"vue-loader": "^8.7.1",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.6.10",

【问题讨论】：

你的 webpack 配置是什么？

Laravel-Mix 应该随您的 laravel 安装一起提供，并且已预先配置为与 Vue 单文件组件一起使用。不过，删除 scss-loader - 这是不必要的。您只需要npm i -D laravel-mix node-sass sass-loader

我使用的是 laravel v5.3，v5.3 支持 gulp 而不是 webpack： - Laravel 5.3 **=>Laravel Elixir**（Gulp） - Laravel 5.4 **=>Laravel混**（Webpack）

【参考方案1】：

我可以通过在文档中关注这个来解决这个问题：https://laravel-mix.com/docs/4.0/upgrade#vue-component-sass-preprocessing

npm install sass sass-loader