Bug: sass conflict with vue loader (Support @nuxtjs/style-resources - middleware/store)

[sondh0127]

Version

nuxt-vite: v0.0.7
nuxt: v2.14.12

Configuration

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt21-vite',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    'nuxt-vite'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },
  telemetry: false,
}

Reproduction

Here is reproduction repo: using create nuxt-app cli

https://github.com/sondh0127/nuxt21-vite

Description

<style lang="scss" scoped>
.nuxt-error {
  padding: 0;
}
</style>

I'm using sass in SFC, by following the Vite docs here
https://vitejs.dev/guide/features.html#css-pre-processors

yarn add sass

But Vite could not resolve the loader from importing .vue components

[sondh0127]

According to #30 (comment)

I need to add the .vue file to make the loader work

import Error404 from '@/components/error/404.vue'
import Error401 from '@/components/error/401.vue'
import ErrorGeneral from '@/components/error/General.vue'

[sondh0127]

The thing left is how to support: @nuxtjs/style-resources:

~assets/scss/abstracts/_variables.scss

$border-radius-common: 4px;

nuxt.config.js

styleResources: {
    scss: [
      '~assets/scss/abstracts/_variables.scss',
    ],
  },

<style lang="scss" scoped>
.empty-data-frame {
  border-radius: $border-radius-common;
}
</style>

[sondh0127]

The thing left is how to support: @nuxtjs/style-resources:

~assets/scss/abstracts/_variables.scss

$border-radius-common: 4px;

nuxt.config.js

styleResources: {
    scss: [
      '~assets/scss/abstracts/_variables.scss',
    ],
  },

<style lang="scss" scoped>
.empty-data-frame {
  border-radius: $border-radius-common;
}
</style>

=> Workaround with inline import

<style lang="scss" scoped>
@import 'assets/scss/abstracts/_variables.scss';

.empty-data-frame {
  border-radius: $border-radius-common;
}
</style>

=>
Now, I am faced with a new problem with middleware and store,... aliases.
store
.nuxt/store.js output with

resolveStoreModules(require('../store/app.js'), 'app.js')

So it actually points outside of the Nuxt app

It should start from the root directory

resolveStoreModules(require('store/app.js'), 'app.js')

[pi0]

Hi! Unrelated but store and middleware support added in 0.0.9 (please use new issue if something is not working with them).

[sondh0127]

The author added it. v0.0.13

[Saravia83c]

[

]()