Many CSS-Classes not applied - even though no import errors

[joulnumberone]

Describe the bug First of all I'm using Vue.js with Nuxt.js and want to import <m-text-field> & <m-select> into my component. To use Vue-Components in Nuxt you need to import them as plugins. In the description of this repository is written, that these components support SSR - but it's only possible to import the plugins on the client (but that's not the main thing). In the @material library underscores are missing on mixins, variables and functions SCSS import paths. However, if I add a <m-text-field> Component, only a few styles like the class .mdc-text-field are applied. The major part of the styling is not applied, even though the import paths should work and all styles should be available. Also i want it outlined - that way it is even more surprising how the result looks.

To Reproduce Steps to reproduce the behavior:

1. Create Nuxt.js Application in Universial mode
2. Install npm-packages as mentioned in the documentation
3. Create Nuxt.js plugin ~/plugins/textfield.js with following code:

import Vue from 'vue'
import TextField from 'material-components-vue/dist/text-field' 
Vue.use(TextField)

Do that for all Elements used on your page 4. Add plugins in nuxt.config.js or in component

  plugins: [
    {
      src: '~/plugins/textfield.js',
      mode: 'client'
    },
    ...
  ]

5. Import styles in your component:

<style lang="scss" scoped>
@import "material-components-vue/dist/text-field/styles";
...
</style>

6. Add the Material-Component in your components template section and bind the v-model to a data field (<client-only> tag excludes elements from SSR):

<client-only>
         <m-text-field v-model="text" id="my-text-field" outlined>
                 <m-floating-label for="my-text-field">label</m-floating-label>
         </m-text-field>
</client-only>

<script>
export default {
    data() {
        return {
            text: ''
     }
}
</script>

Expected behavior I expected a fully styled outlined TextField like on the screenshots from your docu.

Screenshots from Docu .

Actual behavior Only a few styles got applied. Even the border is from the user agent stylesheet. No error messages occured. All paths, filenames and other imports and inclulde should work..

Screenshots from actual implementation on page

Desktop (please complete the following information):

• OS: Win 10
• Browser Chrome
• Version 79