在 <style> 和 <script> vuejs 中导入有什么区别？答案

【问题标题】：What is the difference between importing in <style> and <script> vuejs?在 <style> 和 <script> vuejs 中导入有什么区别？
【发布时间】：2020-04-10 15:27:12
【问题描述】：

我是 vuejs、html 和 css 的新手。当我尝试在 App.vue 中导入 scss 文件时，如果我像这样导入它就可以了

<script>
    import '@/assets/scss/main-pc.scss')
</script>

但是，如果我在 style 中导入它

<style lang="scss">
  @import '@/assets/scss/main-pc.scss';
</style>

它没有正常工作，我遇到了这个错误

These relative modules were not found:

* ../img/bg_login.png in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader
/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

图片的路径好像加载不出来。

你知道为什么吗？

【问题讨论】：

请检查此main-pc.scss 文件。错误是说它找不到这个bg_login.png 相对于您要导入它的组件路径的图像。
@YomS。编辑，它实际上是一个文件。
不，我的意思是，文件main-pc.scss 本身，必须在这个文件中的某个地方引用这个名为“bg_login.png”的图像文件，看看this post。
@YomS。就在这里。但是当我在脚本标签中导入时效果很好。我检查了，问题可能是编译后引起的，css指向不同的文件名（/static/img/bg_login.99bd357.png），而如果在中导入它仍然指向../img/bg_login.png
Style 不用于导入，它意味着包含每个组件的本地样式（您可以将 scoped 选项放在上面），导入应该在脚本中完成。

标签： html css vue.js vuejs2

【解决方案1】：

import '@/assets/scss/main-pc.scss') scss 文件不应位于 <script> 内，因为它是 scss 文件。 scss 文件需要各自的加载器来编译和解析您的 css/scss/sass 文件。

【讨论】：

如果我们使用 sass-loader 会怎样？可以在<style>导入scss吗？
是的，正如@michael 所提到的，包含特定于该组合的样式是一个很好的做法。如果您想添加可重用的类，最好将它们添加到全局样式表中，在您的情况下为 style.scss