如何将后缀为“.scss”的文件导入到Vue项目的子组件中？答案

【问题标题】：How to import the file that suffix is ‘.scss’ into a sub component of Vue project?如何将后缀为“.scss”的文件导入到Vue项目的子组件中？
【发布时间】：2019-06-01 23:37:15
【问题描述】：

这个项目是用 Vue 编码的。

我想将 sass 文件导入子组件。但是浏览器报错'File to import not found or unreadable: ../assets/scss/global_css.scss'

我尝试将“global_css.scss”导入父组件并从

我尝试将'global_css.scss'导入到子组件的中。（听起来不可靠，事实也是如此。）

这是用于导入“global_css.scss”的代码。

<style scoped lang="scss">
  @import "../../assets/scss/global_css";
</style>

（PS.我的经验还很浅薄，如有不妥请见谅。）

这个问题在友信的帮助下已经解决了。他建议修改配置文件中的代码。代码如下：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass',{data:'@import "../assets/scss/global_css";'}), //Delete the code after the comma
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus'),
  }

更正代码：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus'),
  }

成功了！

【问题讨论】：

你被宽恕和深深地爱着;)

标签： css vue.js sass

【解决方案1】：

我可以知道你项目的文件结构吗？

检查您的装载机是否正常工作；
可能你可以试试子组件文件的“相对路径”。

例如。 @import "../../assets/scss/global_css";

【讨论】：

哦，对不起！当我写这个问题时，'.. /' 不见了。

【解决方案2】：

如果你的文件结构是这样的

assets
   scss
     global_css.scss 
components
   sub_components
     s_c.vue

你应该写 @import "../../assets/scss/global_css" 在s_c.vue 中导入global_css.scss。

更多信息见this。

【讨论】：

哦，对不起！我写问题的时候'../'不见了。谢谢你的纠正！