[JavaScript知识库]vue.config.js配置

1.配置全局scss

//2种方式,配置css或者chainWebpack
module.exports={
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                @import "@/assets/css/const.scss";
                `
            }
        }
    },
        // chainWebpack: config => {
    //     const oneOfsMap = config.module.rule('scss').oneOfs.store
    //     oneOfsMap.forEach(item => {
    //         item
    //             .use('sass-resources-loader')
    //             .loader('sass-resources-loader')
    //             .options({
    //                 // 引入一个全局sass文件
    //                 resources: './src/assets/css/const.scss',

    //                 // 引入多个全局sass文件
    //                 //resources: ['./src/assets/styles/vars.scss', './src/assets/styles/mixins.scss', './src/assets/styles/functions.scss']
    //             })
    //             .end()
    //     })
    // },
}

2.引入vant?

npm i vant@next -S

npm i babel-plugin-import -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

import { Button } from 'vant';

createApp(App).use(store).use(router).use(Button).mount('#app')