Nuxt使用scss

Nuxt項目中scss的使用css

 

第一步,安裝依賴html

npm i node-sass sass-loader scss-loader --save-dev

  

第二步,建立scss文件vue

在asset文件夾下新建css文件夾,在css文件夾中新建index.scss文件,做爲scss樣式的總入口,而後在index.scss中經過@import引入其餘scss樣式文件node

@import 'variables';
@import 'mixins';

  

 

第三步,在配置中引入index.scss文件npm

在nuxt.config.js文件中的css中引入sass

 css: [
    { src: '~/assets/css/index.scss', lang: 'scss' }
  ]

  

 

 

ps:也能夠忽略二三步,直接在vue文件下的style中使用scss,以下flex

<style lang="scss">
  .container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .links {
      padding-top: 15px;
    }
  }
</style>

  

 

 

 

嗯,就醬~~~nuxt

相關文章
相關標籤/搜索