Has anyone gotten vue-cli and sass-loader to successfully import their CSS loaders on native? (vue-cli-plugin-nativescript-vue)

Question

I've setup my vue.config.js in my Nativescript-Vue / vue-cli@3.0 project to automatically include my global.scss file into my vue templates. That works great when serving on web, but not on my native emulators.

After running vue inspect (vue inspect -- --env.ios > out-ios.js) my out-ios.js shows sass-loaders prependData: '$PLATFORM: ios;' instead of my @import "styles/global.scss"; that appears in out-web.js. I'm curious if anyone has had this issue or solved it, as I've run out of ideas.

link to my vue.config.js module.export: https://stackoverflow.com/a/62078502/3547640

Answer 1

Posting for future reference if anyone is experiencing similar issues getting SCSS files imported to their nativescript vue templates, my solution involved absolute paths and the vue-cli-plugin-sass-resources plugin.

// vue.config.js
module.exports = {
    pluginOptions: {
        sassResources: {
            resources: path.resolve(__dirname, './src/styles/global.scss'),
        },
    },
}