【发布时间】：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 & stackoverflow 任何答案我做了很多方法...
＊终端错误日志：
找不到模块：错误：无法解析 /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）
标签： laravel vue.js sass gulp vue-component