如何在 vue.js 中加载 scss答案

【问题标题】：How to load scss in vue.js如何在 vue.js 中加载 scss
【发布时间】：2017-08-04 06:07:18
【问题描述】：

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

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

请帮忙！！

【问题讨论】：

看起来很简单。没有掉毛错误或任何东西？
就像你说的，它没有加载。只是确认它是否没有应用样式或根本没有加载到文档中
哦，那是 css 问题，而不是 vue 问题。 DOM 检查上的类是否正确？
我知道问题出在哪里，我实际上缺少样式--form--login，form-block。我提到的那个例子包括部分代码。 :)

标签： javascript css sass vue.js

【解决方案1】：

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

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

如果<script> 标签未关闭，您的样式将被忽略。这应该会在您的控制台中充满大量的红色大喊大叫的消息，但我想并非总是如此？

【讨论】：

【解决方案2】：

除非你为 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
            }]
        }]
    }
};

【讨论】：

我认为如果你使用 vue-cli 设置一个 vue2 项目，webpack 默认配置为编译 sass
@serkandemirel0420 能否请您更新 Webpack 2 的配置文件
@user1 你在用 vue-cli 吗？
不，我没有使用 cli。