基于vue-cli3引入 stylus文件 iconfont

北慕城南 提交于 2020-03-12 06:44:31

一、文档结构

二、全局安装vue-cli

npm intall  -g @vue/cli
// 查看版本号
vue -V

三、vue-cli 创建项目

vue create projectname
//  按照文档操作,ctrl + A全选中; space单应用选中或者不选中; enter下一步

四、在vue.config.js 中配置

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    lintOnSave: false,
    configureWebpack: {
        resolve: {
            alias: {
                '@assets': resolve('src/assets'),
                '@components': resolve('src/components'),
                '@views': resolve('src/views'),
                '@css':resolve('src/assets/css')
            }
        }
    },
}// 或者

 

const path = require('path');function resolve (dir) {    return path.join(__dirname, dir)}module.exports = {    lintOnSave: false,    chainWebpack: config => {        config.resolve.alias        // key,value自行定义,比如.set('@assets', resolve('src/assets'))            .set("@assets",resolve('src/assets'))            .set("@components",resolve('src/components'))            .set("@views",resolve('src/views'))            .set("@css",resolve('src/assets/css'))    }}

 

五、引入 iconfont 

// 在main.ts文件中
import "@assets/font/iconfont.css";

六、引入stylus文件

// vue文件 style模块引用stylus文件@import "~@css/reset.styl";

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!