如何加载SCSS在vue.js

// Vuejs组件如何加载SCSS在vue.js

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

我仍然成分无法正确加载风格。

请帮忙!!

来源

2017-08-04 user1

看起来非常简单。没有linting错误或任何东西？ –

就像你说的那样，它不会加载。只是确认它是否应用样式或不加载文档中的所有 –

哦，那么它是一个CSS问题，而不是一个vue问题。这些类在DOM检查上是否正确？ –

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

来源

2017-08-04 06:20:38 serkan

我想如果你使用vue-cli设置vue2项目，webpack默认配置为编译sass –

@serkandemirel0420你能不能请更新Webpack 2的配置文件 – user1

@ user1你使用的是vue-cli吗？ – serkan

这可能是有点......基本的，但在这里检查

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

如果<script>标签未关闭，你的风格会被忽略。这应该会给你的控制台留下巨大的，红色的，大喊的消息，但我想并不总是这样？

来源

2017-08-04 07:22:07

如何加载SCSS在vue.js

回答

相关问题