如何在Nuxt中设置SASS/SCSS/SASS-LOADER [英] How to setup SASS/SCSS/sass-loader in Nuxt
问题描述
我有Nuxt应用程序,并且我想使用CSS预处理器。
我安装了sass-loader
纤程依赖项,但安装后,应用程序控制台中会出现一条消息,我在映像和代码中显示了该消息
这是代码错误:
WARN webpack@5.49.0 is installed but ^4.46.0 is expected 17:22:44
WARN sass-loader@12.1.0 is installed but ^10.1.1 is expected
Rule can only have one resource source (provided resource and test + include + exclude) in { 17:22:46
"use": [
{
"loader": "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"/home/sergey/all_project/pro_projects_all_language/empty/node_modules/@nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-29[0].rules[0].use[0]"
}
]
}
"use": [
{
"loader": "node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"node_modules/@nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-29[0].rules[0].use[0]"
}
]
}
at checkResourceSource (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:41:32)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:529:11)
我尝试重新安装依赖项,重新安装完全干净的Nuxt应用程序,但问题仍然存在。
推荐答案
若要在Nuxt中安装sass,您必须运行yarn add -D sass sass-loader@10.1.1
(或npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass
)。
sass-loader
的版本需要准确,并设置为最新的10.x.x
,因为下一个版本(11.0.0
)使用的是WebPack5,因此是一个突破性的更改,因为Nuxt2仅在WebPack4上运行,如下所示:https://github.com/webpack-contrib/sass-loader/releases
如果则仍无法在.vue
组件中使用<style lang="sass">
,然后继续。
将此文件添加到您的nuxt.config.js
文件
export default {
build: {
loaders: {
sass: {
implementation: require('sass'),
},
scss: {
implementation: require('sass'),
},
},
}
}
以下是working repo最新推荐的sass
(dart-sass)安装程序,可以使用此类代码正常运行
<template>
<div>
<span class="test">
Hello there
</span>
</div>
</template>
<style lang="sass" scoped>
div
.test
color: red
</style>
PS:如果正确安装了SASS,则SCSS工作正常,因为它们基本上是一样的。
如果您对某些内容(如/ for divison
或此处列出的任何内容)有一些警告:https://sass-lang.com/documentation/breaking-changes
您可以参考此答案获取解决方案:https://stackoverflow.com/a/68648204/8816585
这篇关于如何在Nuxt中设置SASS/SCSS/SASS-LOADER的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!