时间戳

首页 > 解决方案 > 如何将后缀为“.scss”的文件导入到Vue项目的子组件中？

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

问题描述

这个项目是用 Vue 编码的。

我想将 sass 文件导入子组件。但浏览器报告错误“找不到要导入的文件或无法读取：../assets/scss/global_css.scss”

我尝试将“global_css.scss”导入父组件并从<style> 中删除“scoped”。这种方法可以有效！但是我担心这会影响组件之间的CSS样式。我希望找到更好的解决方案。

我试图将'global_css.scss'导入子组件的<脚本>。（这听起来不可靠，事实也是如此。）

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

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

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

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

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'),
  }

更正代码：</p> 

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

成功！</p>

标签： cssvue.jssass

解决方案

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

  1. 检查您的装载机是否正确工作；

  2. 可能您可以尝试子组件文件的“相对路径”。

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

推荐阅读