如何加載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

回答

相關問題