使用“<style lang="scss" scoped>”后出错

Question

我正在使用来自 github 的一些代码，使用后出现错误

任何提示？我对 js 和 vue 还很陌生……总是遇到模块问题。

我试过了

npm uninstall webpack

然后

npm install webpack@^4.0.0 --save-dev

它仍然无法工作:(甚至尝试了其他版本...谢谢帮助..顺便说一句，这是我的第一篇文章：D 抱歉，如果有问题

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\cache-loader\\dist\\cjs.js",
      "options": {
        "cacheDirectory": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\.cache\\babel-loader",
        "cacheIdentifier": "50b893d9"
      },
      "ident": "clonedRuleSet-38.use[0]"
    },
    {
      "loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\babel-loader\\lib\\index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\cache-loader\\dist\\cjs.js",
      "options": {
        "cacheDirectory": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\.cache\\babel-loader",
        "cacheIdentifier": "50b893d9"
      },
      "ident": "clonedRuleSet-38.use[0]"
    },
    {
      "loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\babel-loader\\lib\\index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
    at checkResourceSource (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
    at Function.normalizeRule (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
    at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17)
    at new RuleSet (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
    at new NormalModuleFactory (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
    at Compiler.newCompilationParams (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
    at Compiler.compile (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
    at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._go (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
    at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
    at Compiler.readRecords (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\@vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)

Answer 1

在vue.js 中，您可以声明全局或局部样式。您应该并且可以像这样在vue.js 中使用<style>-tag：

<style>
/* global styles */
</style>

此标签中的样式在您的 vue.js 应用中是全局有效的。

<style scoped>
/* local styles */
</style>

此标记中的样式仅在您声明此<style scoped>-tag 的组件中有效。

有关更多信息，请阅读此文档：Scoped CSS