Использование модуля в vue.config.js

Question

Я пытаюсь использовать следующий код в моем файле vue.config.js, но он дает мне ошибки, что модуль не разрешен. Я знаю, что есть опции configureWebpack и chainWebpack, но я не знаю, как преобразовать следующее, чтобы использовать их. Любая помощь будет оценена

var path = require('path');
module.exports = {
  foo:{},
  bar{},

  // Putting module in here does not work    
  module: { 
        rules: [ 
            { 
                test: /\.vue$/, 
                loader: 'vue-loader', 
                options: { 
                    loaders: { 
                        'scss': [ 
                            'vue-style-loader', 
                            'css-loader', 
                            { 
                                loader: "sass-loader", 
                                options: { 
                                    includePaths: [ 
                                        path.resolve(__dirname, "./node_modules/@syncfusion") 
                                    ] 
                                } 
                            } 
                        ] 
                    } 
                } 
            } 
        ] 
  } 
}

и в моем файле Vue

<style lang="scss">
@import 'subfolder-inside-syncfusion/some-file.scss';
</style>

Ссылка на код, который я нашел:

https://www.syncfusion.com/forums/139116/scss-files-when-included-in-my-file-doesnt-work-as-expected

Answer 1

Вам не нужно подключаться к конфигурации веб-пакета , если все, что вам нужно, это включить глобальный файл SCSS. Чтобы импортировать @syncfusion из node_modules, вы можете настроить vue.config.js следующим образом:

css: {
  loaderOptions: {
    sass: {
      data: `@import "~@syncfusion";`
    }
  }
}

Для получения дополнительной информации см. Vue документы "Работа с CSS" .