Как добавить SCSS в Vue?

Question

[JastaFly]

Доброго всем времени суток! Как использовать препроцессоры вместе с Vue?!?? Вроде делаю всё как по докам, установил sass loader, но стоит добавить атрибут lang="scss", тут же получаю ошибку:
Failed to compile.

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: TypeError: loaderContext.getResolve is not a function
at getWebpackImporter (C:\Projects\mocard\mosoft\node_modules\sass-loader\dist\utils.js:274:37)
at Object.loader (C:\Projects\mocard\mosoft\node_modules\sass-loader\dist\index.js:42:61)
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?localhost:8080 webpack/hot/dev-server ./src/main.js
Подскажите что не так?!??

Comments

[Михаил]

конфиг вебпака

[JastaFly]

Михаил, нет его. Я установил Vue CLI, и на сколько понял там по дефолту ничего такого не создаётся

[Михаил]

JastaFly,
https://cli.vuejs.org/guide/css.html#pre-processors

You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, the internal webpack config is still pre-configured to handle all of them. You just need to manually install the corresponding webpack loaders

[JastaFly]

Михаил, и зачем Вы мне кидаете туже страницу доков только на инглише что и я указал в топике?!?? Просто чтобы повыпендриваться знанием иностранной мовы или ещё для чего-то?!??

[Михаил]

JastaFly, мдеуж, если вы считаете инглиш чем-то особенным — у вас проблемы
попробуйте сменить версию (upgrade/downgrade) node-sass / sass-loader / vue-loader и прочего

[advancesss]

Как в итоге решилась проблема?

Answer 1

[Арсений Матыцин]

Установи в проект node-sass и sass-loader (если я прально помню), а в style компонента пиши lang=sass. При установленных пакетах вебпак сам разберется, что надо подсосать, чтобы проект завелся. Его «конфиг», кстати, расположен при такой генерации в package.json.

В смысле да, не только sass-loader нужен, но и в принципе sass-пакет

Comments

[JastaFly]

Добавил node-sass и просто sass всё равно не работает

[Михаил]

JastaFly, node-sass, sass-loader

[Арсений Матыцин]

JastaFly, ты ведь это с флагом -D сделал, чтобы webpack видел конфиг в package.json?)

[Арсений Матыцин]

Михаил, ну он же еще в вопросе написал что установил sass-loader.