How to load scss in vue.js

Question

//Vuejs component

 <template>
    <form class="form form--login" v-on:submit.prevent="login">
        <h2 class="form__title">Login</h2>

        <div class="info info--error" v-if="infoError">Login failed. Please try again.</div>

        <div :class="{'is-waiting': loader}">
            <div class="form-block">
                <input v-model.trim="username" class="field" name="username" type="text" placeholder="User ID" required>
            </div>

            <div class="form-block">
                <input v-model.trim="password" class="field" name="password" type="password" placeholder="Password" required>
            </div>

            <div class="form-block form__actions">
                <router-link to="/password-reset">Lost your password?</router-link>
                <button class="button button--green form__submit">Login</button>
            </div>
        </div>
    </form>
</template>
<script>

<style lang="scss" type="text/scss">
        .is-waiting {
            position: relative;
            transition-duration: .3s;
            > * {
                opacity: .25;
            }
            &:before {
                content: '';
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 9;
            }
            &:after {
                background: {
                    position: center;
                    size: cover;
                }
                content: '';
                height: 64px;
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 64px;
            }
        }
    </style>

//webpack.config

"dependencies": {
    "onsenui": "^2.5.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue": "^2.4.2",
    "vue-onsenui": "^2.1.0",
    "vue-resource": "^1.3.4",
    "vuex": "^2.3.1"
  },

My component still doesn't load style correctly.

Please help!!

Answer 1

Unless you configure webpack for SASS compiling its natural that it wont work. If your are using an IDE such as Webstorm it compiles beautifully and shows it in the project folder. In my case i just point it to css file.

In your case try to update your config file as:

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

Answer 2

This might be a bit... basic, but check here

      </form>
    </template>
    <script>
--->    
    <style lang="scss" type="text/scss">

If that <script> tag isn't closed, your styles get ignored. This should fill your console with large, red, yelling messages, but I guess not always?