Vue CLI记录

1、审核项目的Webpack配置，在项目中终端运行即可，特别的有用：

vue inspect（所有）

vue inspect --rule sass (sass规则）

2、css样式自动导入 项目中通常会有存放颜色、mixin、全局变量等的样式文件，如variable.scss, mixin.scss。以往会在vue单文件中@import引入，但每次都引入很繁琐。通过以下2种方法在全局引入一次，即可使用：

方法1：

1）npm安装style-resources-loader

2）vue.config.js文件进行配置：(参考cli.vuejs.org/zh/guide/cs… ）

function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/variables.scss'),
        path.resolve(__dirname, './src/styles/mixin.scss')
      ]
    })
}
chainWebpack: config => {
    //注释：为什么是以下四类，可以通过上面vue inspect打印
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
}

方法2：vue.config.js文件进行配置：(参考cli.vuejs.org/zh/guide/cs… ）

css: {
    loaderOptions: {
      sass: {
        //注释：在 sass-loader v8 中，这个选项名是 "prependData"；v8-中，是"data"；v8+中，是"additionalData"
        data: `
          @import "~@/styles/variables.scss";
          @import "@/styles/mixin.scss";
        `
      }
    }
}