How to import the file that suffix is ‘.scss’ into a sub component of Vue project?

Question

This project is coded with Vue.

I want to import a sass file to a sub component. But the browser reported an error 'File to import not found or unreadable: ../assets/scss/global_css.scss'

I have tried to import 'global_css.scss' into the parent component and delete 'scoped' from < style >. This approach can be effective！ But I`m afraid this will affect CSS styles among components.I hope to find a better solution.

I have tried to import 'global_css.scss' into < script > of the sub component.(That sounds unreliable, and so does the fact.)

This is the code used to import the 'global_css.scss'.

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

(PS.My experience is still shallow. If I have any fault, please forgive me.)

This problem has been solved with Uiosun`s help. He suggested modifying the code in the configuration file. The code as follows:

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

Corrected code：

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

Success！

You are forgiven and deeply loved ;) – Yom T. Jan 07 '19 at 10:12 — Yom T., Jan 07 '19 at 10:12

UioSun · Accepted Answer · 2019-01-07T10:22:37.447

0

Can i know file structure of your project?

check your loader is right work;
may be you can try "relative path" of the sub component file.

eg. @import "../../assets/scss/global_css";

edited Jan 07 '19 at 10:22

answered Jan 07 '19 at 10:12

UioSun

59
5

Oh,sorry!The'.. /'was missing when I wrote the question. – XiaoMan Jan 07 '19 at 10:25

score 0 · Answer 2 · answered Jan 07 '19 at 10:20

0

If your file structure like this

assets
   scss
     global_css.scss 
components
   sub_components
     s_c.vue

You should write @import "../../assets/scss/global_css" in s_c.vue to import global_css.scss.

More information see this.

answered Jan 07 '19 at 10:20

Cyrbuzz

119
1
8

Oh,sorry!The'.. /'was missing when I wrote the question.Thank you for your correction！ – XiaoMan Jan 07 '19 at 10:27

How to import the file that suffix is ‘.scss’ into a sub component of Vue project?

2 Answers2