Правильный способ ISO связать Webpack через vue .config. js, чтобы добавить глобальный импорт .s css в мои. vue файлы (vue -cli-plugin-nativescript- vue) - PullRequest
Новая
       76

Правильный способ ISO связать Webpack через vue .config. js, чтобы добавить глобальный импорт .s css в мои. vue файлы (vue -cli-plugin-nativescript- vue)

0 голосов
/ 29 мая 2020

У меня есть проект Vue. js, который я настроил ранее, который динамически добавляет определенные файлы .s css в мои файлы шаблонов. vue, чтобы я мог получить доступ к своим переменным, миксинам и т. Д. c . в шаблонах без их @importing или дублирования кода из импорта.

Моя проблема в том, что я настраиваю проект NativeScript / Vue. js с помощью vue -cli-plugin- nativescript- vue и было любопытно, успешно ли кто-нибудь настроил свой веб-пакет, чтобы обеспечить ту же функциональность. Насколько я понимаю, при запуске плагин заменяет webpack на последнюю версию, как указано в документах https://cli.vuejs.org/guide/webpack.html#replacing -loaders-of-a-rule .

Ниже мой vue .config. js (который компилируется без ошибок), но, похоже, не работает. Я, вероятно, что-то упускаю или не понимаю, как именно это работает, любая помощь приветствуется. 


const path = require('path')

module.exports = {
    chainWebpack: config => {
        const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']
        const cssRules = config.module.rule('css')
        const postRules = config.module.rule('postcss')

        const addSassResourcesLoader = (rules, type) => {
            rules
                .oneOf(type)
                .use('sass-resoureces-loader')
                .loader('sass-resources-loader')
                .options({
                    resources: './src/styles/_global.scss', // your resource file or patterns
                })
        }
        ofs.forEach(type => {
            addSassResourcesLoader(cssRules, type)
            addSassResourcesLoader(postRules, type)
        })
        return config
    },
}

1 Ответ

1 голос
/ 29 мая 2020

Vue CLI предоставляет конфигурацию для расширения ваших CSS загрузчиков: 

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `import "~@/styles/_global.scss";`,
      }
    }
  }
}
...