vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

Root Component without style body breaks global styles #3770

Closed jankrloz closed 5 years ago

jankrloz commented 5 years ago

Version

3.5.5

Reproduction link

https://gitlab.com/jankrloz/cv

Environment info

  System:
    OS: Linux 4.15 Deepin 15 15.9.3
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
  Binaries:
    Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
    Yarn: 1.15.2 - ~/.nvm/versions/node/v8.10.0/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.10.0/bin/npm
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.3 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.3 
    @vue/babel-preset-app:  3.5.5 
    @vue/babel-preset-jsx:  1.0.0-beta.3 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.3 
    @vue/babel-sugar-inject-h:  1.0.0-beta.3 
    @vue/babel-sugar-v-model:  1.0.0-beta.3 
    @vue/babel-sugar-v-on:  1.0.0-beta.3 
    @vue/cli: ^3.3.0 => 3.5.5 
    @vue/cli-overlay:  3.5.1 
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.5 
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1 
    @vue/cli-service: ^3.5.0 => 3.5.3 
    @vue/cli-shared-utils:  3.5.1 
    @vue/cli-ui:  3.5.5 
    @vue/cli-ui-addon-webpack:  3.5.5 
    @vue/cli-ui-addon-widgets:  3.5.5 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    eslint-plugin-vue: ^5.2.2 => 5.2.2 
    svg-to-vue:  0.3.0 
    vue: ^2.6.6 => 2.6.10 
    vue-cli-plugin-apollo:  0.19.2 
    vue-cli-plugin-element: ^1.0.1 => 1.0.1 
    vue-cli-plugin-webpack-bundle-analyzer: ^1.2.0 => 1.2.0 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-particles: ^1.0.9 => 1.0.9 
    vue-scrollto: ^2.15.0 => 2.15.0 
    vue-style-loader:  4.1.2 
    vue-svg-inline-loader: ^1.2.15 => 1.2.15 
    vue-svg-loader: ^0.11.0 => 0.11.0 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Remove style body of src/App.vue and the src/assets/scss/global.scss added via vue.config.js is not more injected.

What is expected?

src/assets/scss/global.scss injected successfully

What is actually happening?

src/assets/scss/global.scss not injected

LinusBorg commented 5 years ago

You are misunderstanding what this configuration is for. It's meant to include files that only provide variables, mixins etc, so you can use them any component without manually using @import in each of them.

You should not use that configuration for files that contain actual CSS, because these files, because it would be imported in every component of your project, resulting in lots and lots of duplicated CSS.

With this understanding, you should see that this is not a bug bug expected behaviour: No style tag = bo injection, but that's fine as the component has no use for SCSS variables if there is no SCSS code to consume them.

So where to put the gobal CSS? in main.js

import './assets/scss.global.scss'