基本配置 - 图2

创建项目

  1. yarn create nuxt-app [项目名]
  2. or
  3. npx create-nuxt-app [项目名]
  4. or
  5. npm init nuxt-app [项目名]

在终端中输入命令后选择配置如下

image.png
项目创建好后就会出现如下图所示
image.png

配置scss

  1. // https://nuxtjs.org/docs/2.x/features/configuration#the-css-property
  2. yarn add -D sass sass-loader

将bulma的变量配置为全局可使用

将bulma的color变量设为全局变量

详情访问：链接

  • 安装bulma

    1. yarn add bulma

  • 在项目根目录下的assets文件夹里新建styles文件夹，然后再新建index.scss，将bulma的css引入

    1. @import 'bulma/sass/utilities/_all.sass';
    2. @import '~bulma';

    ```vue

  1. > 上面方法虽然能引用bulma的变量，但只能在局部中引用，不能再全局中引用，如果在全局中使用，还得在nuxt.config.js中研究如何配置，于是看完[Eduardo Vedes](https://www.freecodecamp.org/news/author/evedes/)的这篇[文章](https://www.freecodecamp.org/news/up-goind-with-nuxt-js-bulma-and-sass/)中提到了**[@nuxtjs/style-resources](https://www.npmjs.com/package/@nuxtjs/style-resources)可以实现全局配置**
  3. - 在 ` ``nuxt.config.js ` 中添加如下配置：
  4.    - css数组中添加全局配置 `css: ['~assets/styles/index.scss']`
  5.    - 添加`styleResources` 模块 `styleResources: { scss: ['~assets/styles/index.scss'] }`
  6.    - 在`modules`中添加 `'@nuxtjs/style-resources'`
  7. ```javascript
  8. // nuxt.config.js
  9. export default {
  10.     // Global page headers (https://go.nuxtjs.dev/config-head)
  11.     head: {
  12.         title: 'lin-blog',
  13.         meta: [
  14.             { charset: 'utf-8' },
  15.             {
  16.                 name: 'viewport',
  17.                 content: 'width=device-width, initial-scale=1',
  18.             },
  19.             { hid: 'description', name: 'description', content: '' },
  20.         ],
  21.         link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  22.     },
  24.     // Global CSS (https://go.nuxtjs.dev/config-css)
  25.     css: ['~assets/styles/index.scss'],
  27.     // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  28.     plugins: [],
  30.     // Auto import components (https://go.nuxtjs.dev/config-components)
  31.     components: true,
  33.     // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  34.     buildModules: [
  35.         // https://go.nuxtjs.dev/eslint
  36.         '@nuxtjs/eslint-module',
  37.         // https://go.nuxtjs.dev/stylelint
  38.         '@nuxtjs/stylelint-module',
  39.     ],
  40.     styleResources: {
  41.         scss: ['~assets/styles/index.scss'],
  42.     },
  44.     // Modules (https://go.nuxtjs.dev/config-modules)
  45.     modules: [
  46.         // https://github.com/nuxt-community/style-resources-module
  47.         '@nuxtjs/style-resources',
  48.         // https://go.nuxtjs.dev/bootstrap
  49.         '@nuxtjs/bulma',
  50.         // https://go.nuxtjs.dev/axios
  51.         '@nuxtjs/axios',
  52.     ],
  54.     // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  55.     axios: {},
  57.     // Build Configuration (https://go.nuxtjs.dev/config-build)
  58.     build: {
  59.         postcss: {
  60.             preset: {
  61.                 features: {
  62.                     customProperties: false,
  63.                 },
  64.             },
  65.         },
  66.     },
  67. };

更简单的配置：

此方法也是借鉴Serhan C.的分享：链接

nuxt.config.js中的build里添加loaders配置：

  1. build: {
  2.     // ...其他配置
  4.     // 以下为新增配置
  5.     loaders: {
  6.         sass: {
  7.               prependData: "@import '~bulma/sass/utilities/_all.sass;",
  8.         },
  9.     },
  10. },

完整配置如下：

  1. // nuxt.config.js
  2. export default {
  3.     // Global page headers (https://go.nuxtjs.dev/config-head)
  4.     head: {
  5.         title: 'lin',
  6.         meta: [
  7.             { charset: 'utf-8' },
  8.             {
  9.                 name: 'viewport',
  10.                 content: 'width=device-width, initial-scale=1',
  11.             },
  12.             { hid: 'description', name: 'description', content: '' },
  13.         ],
  14.         link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  15.     },
  17.     // Global CSS (https://go.nuxtjs.dev/config-css)
  18.     css: [],
  20.     // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  21.     plugins: [],
  23.     // Auto import components (https://go.nuxtjs.dev/config-components)
  24.     components: true,
  26.     // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  27.     buildModules: [
  28.         // https://go.nuxtjs.dev/eslint
  29.         '@nuxtjs/eslint-module',
  30.     ],
  32.     // Modules (https://go.nuxtjs.dev/config-modules)
  33.     modules: [
  34.         // https://go.nuxtjs.dev/bootstrap
  35.         '@nuxtjs/bulma',
  36.         // https://go.nuxtjs.dev/axios
  37.         '@nuxtjs/axios',
  38.     ],
  40.     // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  41.     axios: {},
  43.     // Build Configuration (https://go.nuxtjs.dev/config-build)
  44.     build: {
  45.         postcss: {
  46.             preset: {
  47.                 features: {
  48.                     customProperties: false,
  49.                 },
  50.             },
  51.         },
  52.         loaders: {
  53.             sass: {
  54.                 prependData: "@import '~bulma/sass/utilities/_all.sass;",
  55.             },
  56.         },
  57.     },
  58. };