Question

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

我正在使用gulp（laravel-elixir来编译sass/scss，这没问题。我可以在Laravel刀片的任何地方进行所有样式的工作：

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（主）：

"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",

Answer 1

我能够通过遵循文档中的以下内容来解决此问题：https://laravel-mix.com/docs/4.0/upgrade#vue-component-sass-preprocessing

npm install sass sass-loader

Vue组件不能在Laravel中使用Scss

1 个答案: