Nuxt使用scss

Nuxt項目中scss的使用

 

第一步，安裝依賴

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

　　

第二步，創建scss文件

在asset文件夾下新建css文件夾，在css文件夾中新建index.scss文件，作為scss樣式的總入口，然后在index.scss中通過@import引入其他scss樣式文件

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

　　

 

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

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

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

　　

 

 

ps：也可以忽略二三步，直接在vue文件下的style中使用scss，如下

<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>

　　

 

 

 

嗯，就醬~~~