Nuxt使用scss

时间 2019-11-08

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