vuejs-templates / webpack

A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
MIT License
9.7k stars 4.38k forks source link

Importing multiple scss files with /* fails to import (file not found) #1413

Open karimmaassen opened 6 years ago

karimmaassen commented 6 years ago

In my app.vue, I include a main.scss:

<style lang="scss">
@import 'scss/main';
</style>

In the main.scss, I include partials, like this:

// Partials
@import "partials/*"

This results in an error, as the '*' selector won't work:

Failed to compile.

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5ef48958","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/app.vue
Module build failed: 
@import "partials/*"
^
      File to import not found or unreadable: partials/*.
      in /Users/karimmaassen/Projects/alpha/src/scss/main.scss (line 12, column 1)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5ef48958","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/app.vue 4:14-359 13:3-17:5 14:22-367
 @ ./src/app.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
karimmaassen commented 6 years ago

For now, I resolve to mentioning all partial separately, but that should not be needed.

// Partials
@import "partials/cubes"
@import "partials/grid"
@import "partials/game"
wqb2017 commented 6 years ago

1 scss

The situation is the same as mine. Do you have a solution?

wqb2017 commented 6 years ago

I remove node_modules the dependencies and reinstall them.

npm install

o(╥﹏╥)o

rambavd commented 5 years ago

Still no solutions? I am styling over Vuetify components, and there is a ton of them... To keep my file clean, though, I created a "vuetify.styl" file in my CSS folder, in which I imported every file I needed, so I could have a cleaner "main" style file.