Как настроить webpack через vue-cli 3 для использования sass - PullRequest
Новая
       10

Как настроить webpack через vue-cli 3 для использования sass

0 голосов
/ 12 декабря 2018

Я создаю приложение vue с помощью vue-cli 3. Я хотел бы включить файлы sass в мою сборку веб-пакета, но vue-cli абстрагирует файл webpack.config.js.Вместо этого мы должны создать файл vue.config.js и настроить его с помощью набора инструкций.

Если бы я настраивал webpack.config.js, сработало бы следующее: 

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
}

Как мне следуетнастроить мой vue.config.js для достижения того же?Вот моя лучшая попытка: 

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('scss')
            .test(/\.scss$/)
            .use('vue-style-loader')
            .loader('vue-style-loader')
            .use('css-loader')
            .loader('css-loader')
            .use('sass-loader')
            .loader('sass-loader')
            .end();
    }
};

Это терпит неудачу с сообщением 

ERROR  TypeError: config.module.rule(...).test(...).use(...).loader(...).use is not a function
...