Vue.js приложение, как сделать сборку less/sass?

Question

[Greg Popov]

Привет. Начинаю разбираться с Vue.js, застрял на подключении обработки .scss/.less файлов. Проект — шаблонная болванка установленная через консоль.

Не совсем ясен момент со сборкой: я пишу по классике все в .sass/.less, потом подключаю минифицированый файл, или я в кажом .vue компоненте пишу свои стили, и делаю один общий с импортом?

На проекте стоит webpack из коробки (3.6.0).

Из офф документации пытался подключить вот таким способом обработчик:

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
          }
        }
      }

Эфекта — 0.

Объясните плиз, в чем проблема?

Answer 1

[Nikita Velko]

Попробуйте так:

{
  test: /\.vue$/,
  loader: 'vue-loader',
},
{
  test: /\.scss$/,
  loaders: [ "style-loader", "css-loader", "sass-loader" ]
},

И потом импорт стилей в компонент:

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

Мой совет, используйте vue-cli, если вы ещё не.

Comments

[Greg Popov]

Nikita Velko можно в паре слов почему? (прям очень доходчиво)

[Nikita Velko]

Greg Popov, вебпак резолвит расширение файла, которое указано в ключе test и применяет к нему указанные лоадеры. В вашем случае вы видимо в какую-то старую документацию вебпака смотрели. Вебпак, встречая файлы стилей, не знал через какой лоадер эти файлы прогонять.
Вот актуальная по лоадерам документация.

[Nikita Velko]

Greg Popov, разобрались?

[Greg Popov]

Nikita Velko, спасибо большое