Блог

Главная - Вопросы по программированию - Невозможно добавить Sass в проект Vue в Webpack 3

Невозможно добавить Sass в проект Vue в Webpack 3

#node.js #vue.js

#node.js #vue.js

Вопрос:

Я только что установил sass-loader и node-sass в свой проект через npm:

 npm install -D node-sass sass-loader

Затем заменил тег style внутри компонента vue на:

 <style lang="scss"></style>

Я получаю следующую ошибку:

  Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.join (path.js:432:7)
    at getSassOptions (C:UserstomekDesktopprojektyprojectsBacketlistnoteTakingAppfrontendnoteTakkingAppnode_modulessass-loaderdistutils.js:160:37)
    at Object.loader (C:UserstomekDesktopprojektyprojectsBacketlistnoteTakingAppfrontendnoteTakkingAppnode_modulessass-loaderdistindex.js:36:49) 
 @ ./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=stylesamp;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?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Что я могу сделать, чтобы исправить эту проблему?

Комментарии:

1. Да, конечно github.com/TomekPulkiewicz/NoteTakingAppFrontend ‘

Ответ №1:

Версия Webpack в вашем проекте (3.x) устарела и несовместима с новейшими версиями node-sass and sass-loader (5.x и 10.x соответственно).

Для Sass в Webpack 3 установите node-sass 4.x и sass-loader 7.x:

 npm i -D node-sass@^4 sass-loader@^7

Комментарии:

1. @nanobot Vue CLI создает для вас проект Vue. То есть команда create командной строки ( vue create myproject ) генерирует проект, который автоматически использует правильную версию Webpack, поэтому вам не нужно устанавливать Webpack явно. Вы можете столкнуться с руководствами, предлагающими vue init webpack создать проект Vue с поддержкой Webpack, но этот шаблон уже давно устарел .

2. Ах, теперь это имеет смысл. Это именно то, что мне рассказали в руководстве от 2018 года.