美文网首页
基于nuxt通过webpack配置ant-Design-vue的

基于nuxt通过webpack配置ant-Design-vue的

作者: 五点半的太阳 | 来源:发表于2019-12-17 09:55 被阅读0次

    1.首先在nuxt官网初始化好基于ant-Design-vue的项目,

    nuxt官网链接 https://zh.nuxtjs.org/guide/installation

    安装.png
    选择ant-Design-vue UI框架

    2.初始化完成,查找package.json是否安装了less与less-loader的包,

    package.json.png

    一般项目在初始化完成后,是没有自动安装less与less-loader的,需要我们手动去配置,
    通过npm less less-loader --save-dev去安装

    3.安装完成less与less-loader后,配置nuxt.config.js

    找到nuxt.config.js这个文件夹,该文件在项目根目录
    这是没有修改,nuxt初始化好的配置文件。

    module.exports = {
      mode: 'universal',
      /*
      ** Headers of the page
      */
      head: {
        title: process.env.npm_package_name || '',
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
      },
      /*
      ** Customize the progress-bar color
      */
      loading: { color: '#fff' },
      /*
      ** Global CSS
      */
      css: [
        'ant-design-vue/dist/antd.css'
      ],
      /*
      ** Plugins to load before mounting the App
      */
      plugins: [
        '@/plugins/antd-ui'
      ],
      /*
      ** Nuxt.js modules
      */
      modules: [
      ],
      /*
      ** Build configuration
      */
      build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
        },
      }
    }
    

    找到css属性,在这个地方就是去扩展webpack配置的东西,将引用是.css文件改为less文件

    /*
      ** Global CSS
      */
      css: [
        'ant-design-vue/dist/antd.css'
      ],
    

    然后找到注解为you can extend webpack config here的地方,这里就是进行webpack配置的地方了,我们需要将安装的less-loader进行配置,这里配置的方法有两种

    第一种,在extend的方法中通过config这个属性去获取webpack的modul.rules属性进行扩展,

    rules这个属性是一个数组,我们通过push方法来给rules添加less的相关配置,直接上代码

    extend(config, ctx) {
          console.log(config)
          config.module.rules.push(
            {
              test:/\.less/,
              loader: 'less-loader', // compiles Less to CSS
              options: {
                modifyVars: {
                  'primary-color': '#1DA57A',
                  'link-color': '#1DA57A',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true,
              },
            }
          )
        },
    

    配置好后,关闭服务器,重新启动,npm run dev就可以看到效果

    第二种方法,直接在build这个属性下面去添加loaders这个属性去配置,话不多说直接上代码

     build: {
        /*
        ** You can extend webpack config here
        */
         loaders: {
           less: {
             javascriptEnabled: true,
            modifyVars: {
               'primary-color': '#41b883',
              'layout-body-background': '#fff'
             }
           }
         }
      }
    }
    

    配置好后,关闭服务器,重新启动,npm run dev就可以看到效果

    最后效果

    效果一.png
    效果二.png

    相关文章

      网友评论

          本文标题:基于nuxt通过webpack配置ant-Design-vue的

          本文链接:https://www.haomeiwen.com/subject/uszjnctx.html