配置

配置 loader

默认 nuxt 不安装一些 webpack 的各种 loader, 可以自行安装。

less

$ yarn add -D less less-loader

nuxt.config.js 中配置:

module.exports = {
  // ...
  build: {
    loaders:[
	    {
		    test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
		    exclude: /node_modules/
	    }
    ]
  }
  // ...
}

在 Vue 中使用:

<style lang='less' scoped>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .title {
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
  }
}
</style>

stylus

$ yarn add -D stylus stylus-loader

nuxt.config.js 中配置:

module.exports = {
  // ...
  build: {
    loaders:[
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'],
        exclude: /node_modules/
      }
    ]
  }
  // ...
}

在 Vue 中使用:

<style lang='stylus' scoped>
.container
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .title
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
</style>

pug

$ yarn add -D pug pug-plain-loader

nuxt.config.js 中配置:

module.exports = {
  // ...
  build: {
    loaders:[
      {
        test: /\.pug/,
        loaders: ['html-loader', 'pug-html-loader'],
        include: [resolve('src'), resolve('test')],
        exclude: /node_modules/
      }
    ]
  }
  // ...
}

在 Vue 中使用:

<template lang='pug'>
.container
  logo
  h1.title nuxt-test
  h2.subtitle My beautiful Nuxt.js project
</template>

提示

经测试, 在 nuxt.config.js 中不配置 build.loaders 选项也能正常运作。

使用 ESLint

在安装的时候, 可以选择开启 eslint。

若要自动修复语法错误, 在 package.json 中配置:

{
  "scripts": {
    "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore .",
  }
}

加上 --fix 选项, 将在每次检查语法的时候自动修复。

注意

--ignore-path 配置忽略检查的文件

默认在 .eslintignore.gitignore 配置的文件或路径不会被列入检查之列

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress