Добавить поддержку SCSS в проект Vue

Question

В моем packages.json файле по умолчанию я получаю:

"postcss": {
"plugins": {
  "autoprefixer": {}
}}

Когда я добавляю <style lang='scss'> Он не компилируется, как по волшебству, как для поддержки Typescript. Я знаю, что мне нужно будет указать какой-нибудь пакет NPM как devDependencies и указать что-то выше в разделе postcss, чтобы получить scss для компиляции, но я не могу найти какую-либо документацию вне webpack, поэтому я потерян.

Answer 1

См. https://vue -loader.vuejs.org / guide / pre-processors.html .

Например, чтобы скомпилировать наш тег <style> с помощью SASS / SCSS:

npm install -D sass-loader node-sass

В вашей конфигурации веб-пакета:

module.exports = {
  module: {
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin omitted
}

Теперь, помимо возможности import 'style.scss', мы можем использовать SCSS в компонентах Vue:

<style lang="scss"> /* write SCSS here */ </style>

Любой контент внутри блока будет обрабатываться веб-пакетом, как если бы он внутри *.scss файла.