Question

// Vuejs组件

 <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"
  },

我的组件仍然无法正确加载样式。

请帮助!!

Answer 1

除非您为SASS配置webpack，否则它自然会无法正常工作。如果您正在使用诸如Webstorm之类的IDE，它会精美地编译并在项目文件夹中显示它。在我的情况下，我只是将它指向css文件。

在您的情况下，尝试将配置文件更新为：

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

这可能有点......基本，但请点击这里

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

如果未关闭<script>标记，则会忽略您的样式。这应该会在你的控制台上填充大而红的，大喊大叫的消息，但我想并不总是这样？

如何在vue.js中加载scss

2 个答案: