基於vue-cli3引入 stylus文件 iconfont

一、文檔結構

二、全局安裝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";