添加vue/cli4 sass-loader v9全局注入变量教程

docs/zh/guide/css.md

@@ -135,7 +135,20 @@ module.exports = {
       // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
       scss: {
-        prependData: `@import "~@/variables.scss";`
+        // sass-loader v8语法
+        // prependData: `@import "~@/variables.scss";`
+        // sass-loader v9语法
+        additionalData(content, loaderContext) {
+          const { resourcePath, rootContext } = loaderContext;
+          const relativePath = path.relative(rootContext, resourcePath);
+          if (
+            relativePath.replace(/\\/g, "/") !== "src/styles/variables.scss"
+          ) {
+            return '@import "~@/styles/variables.scss";' + content;
+          }
+          return content;
+        },
+
       },
       // 给 less-loader 传递 Less.js 相关选项
       less:{

packages/@vue/babel-preset-app/index.js

@@ -81,7 +81,13 @@ function getPolyfills (targets, includes) {
   }
 
   const compatData = require('core-js-compat').data
-  return includes.filter(item => isRequired(item, targets, { compatData }))
+  return includes.filter(item => {
+    if (!compatData[item]) {
+      throw new Error(`Cannot find polyfill ${item}, please refer to 'core-js-compat' for a complete list of available modules`)
+    }
+
+    return isRequired(item, targets, { compatData })
+  })
 }
 
 module.exports = (context, options = {}) => {

packages/@vue/cli-plugin-typescript/package.json

@@ -36,8 +36,14 @@
   },
   "peerDependencies": {
     "@vue/cli-service": "^3.0.0 || ^4.0.0-0",
+    "@vue/compiler-sfc": "^3.0.0-beta.14",
     "typescript": ">=2"
   },
+  "peerDependenciesMeta": {
+    "@vue/compiler-sfc": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/chai": "^4.2.11",
     "@types/jest": "^24.0.19",

packages/@vue/cli-service/bin/vue-cli-service.js

@@ -3,7 +3,7 @@
 const { semver, error } = require('@vue/cli-shared-utils')
 const requiredVersion = require('../package.json').engines.node
 
-if (!semver.satisfies(process.version, requiredVersion)) {
+if (!semver.satisfies(process.version, requiredVersion, { includePrerelease: true })) {
   error(
     `You are using Node ${process.version}, but vue-cli-service ` +
     `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`

packages/@vue/cli-service/lib/config/base.js

@@ -1,3 +1,5 @@
+const { semver, loadModule } = require('@vue/cli-shared-utils')
+
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
@@ -51,12 +53,6 @@ module.exports = (api, options) => {
         .end()
       .alias
         .set('@', api.resolve('src'))
-        .set(
-          'vue$',
-          options.runtimeCompiler
-            ? 'vue/dist/vue.esm.js'
-            : 'vue/dist/vue.runtime.esm.js'
-        )
 
     webpackConfig.resolveLoader
       .plugin('pnp-loaders')
@@ -73,40 +69,76 @@ module.exports = (api, options) => {
     // js is handled by cli-plugin-babel ---------------------------------------
 
     // vue-loader --------------------------------------------------------------
-    const vueLoaderCacheIdentifier = {
-      'vue-loader': require('vue-loader/package.json').version
-    }
+    const vue = loadModule('vue', api.service.context)
+
+    if (semver.major(vue.version) === 2) {
+      // for Vue 2 projects
+      const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
+        'vue-loader': require('vue-loader/package.json').version,
+        '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
+        'vue-template-compiler': require('vue-template-compiler/package.json').version
+      })
 
-    // The following 2 deps are sure to exist in Vue 2 projects.
-    // But once we switch to Vue 3, they're no longer mandatory.
-    // (In Vue 3 they are replaced by @vue/compiler-sfc)
-    // So wrap them in a try catch block.
-    try {
-      vueLoaderCacheIdentifier['@vue/component-compiler-utils'] =
-        require('@vue/component-compiler-utils/package.json').version
-      vueLoaderCacheIdentifier['vue-template-compiler'] =
-        require('vue-template-compiler/package.json').version
-    } catch (e) {}
-    const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', vueLoaderCacheIdentifier)
+      webpackConfig.resolve
+        .alias
+          .set(
+            'vue$',
+            options.runtimeCompiler
+              ? 'vue/dist/vue.esm.js'
+              : 'vue/dist/vue.runtime.esm.js'
+          )
+
+      webpackConfig.module
+        .rule('vue')
+          .test(/\.vue$/)
+          .use('cache-loader')
+            .loader(require.resolve('cache-loader'))
+            .options(vueLoaderCacheConfig)
+            .end()
+          .use('vue-loader')
+            .loader(require.resolve('vue-loader'))
+            .options(Object.assign({
+              compilerOptions: {
+                whitespace: 'condense'
+              }
+            }, vueLoaderCacheConfig))
+
+      webpackConfig
+        .plugin('vue-loader')
+          .use(require('vue-loader').VueLoaderPlugin)
+    } else if (semver.major(vue.version) === 3) {
+      // for Vue 3 projects
+      const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
+        'vue-loader': require('vue-loader-v16/package.json').version,
+        '@vue/compiler-sfc': require('@vue/compiler-sfc/package.json').version
+      })
 
-    webpackConfig.module
-      .rule('vue')
-        .test(/\.vue$/)
-        .use('cache-loader')
-          .loader(require.resolve('cache-loader'))
-          .options(vueLoaderCacheConfig)
+      webpackConfig.resolve
+        .alias
+          .set(
+            'vue$',
+            options.runtimeCompiler
+              ? 'vue/dist/vue.esm-bundler.js'
+              : '@vue/runtime-dom'
+          )
+
+      webpackConfig.module
+        .rule('vue')
+          .test(/\.vue$/)
+          .use('cache-loader')
+            .loader(require.resolve('cache-loader'))
+            .options(vueLoaderCacheConfig)
+            .end()
+          .use('vue-loader')
+            .loader(require.resolve('vue-loader'))
+            .options(vueLoaderCacheConfig)
+            .end()
           .end()
-        .use('vue-loader')
-          .loader(require.resolve('vue-loader'))
-          .options(Object.assign({
-            compilerOptions: {
-              whitespace: 'condense'
-            }
-          }, vueLoaderCacheConfig))
 
-    webpackConfig
-      .plugin('vue-loader')
-      .use(require('vue-loader/lib/plugin'))
+      webpackConfig
+        .plugin('vue-loader')
+          .use(require('vue-loader-v16').VueLoaderPlugin)
+    }
 
     // static assets -----------------------------------------------------------
 

packages/@vue/cli-service/package.json

@@ -69,6 +69,7 @@
     "thread-loader": "^2.1.3",
     "url-loader": "^2.2.0",
     "vue-loader": "^15.9.2",
+    "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.3",
     "vue-style-loader": "^4.1.2",
     "webpack": "^4.0.0",
     "webpack-bundle-analyzer": "^3.8.0",
@@ -77,9 +78,13 @@
     "webpack-merge": "^4.2.2"
   },
   "peerDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-beta.14",
     "vue-template-compiler": "^2.0.0"
   },
   "peerDependenciesMeta": {
+    "@vue/compiler-sfc": {
+      "optional": true
+    },
     "less-loader": {
       "optional": true
     },

packages/@vue/cli/bin/vue.js

@@ -8,7 +8,7 @@ const requiredVersion = require('../package.json').engines.node
 const leven = require('leven')
 
 function checkNodeVersion (wanted, id) {
-  if (!semver.satisfies(process.version, wanted)) {
+  if (!semver.satisfies(process.version, wanted, { includePrerelease: true })) {
     console.log(chalk.red(
       'You are using Node ' + process.version + ', but this version of ' + id +
       ' requires Node ' + wanted + '.\nPlease upgrade your Node version.'

packages/@vue/cli/lib/Generator.js

@@ -6,7 +6,7 @@ const sortObject = require('./util/sortObject')
 const writeFileTree = require('./util/writeFileTree')
 const inferRootOptions = require('./util/inferRootOptions')
 const normalizeFilePaths = require('./util/normalizeFilePaths')
-const runCodemod = require('./util/runCodemod')
+const { runTransformation } = require('vue-codemod')
 const {
   semver,
 
@@ -277,19 +277,19 @@ module.exports = class Generator {
       let imports = this.imports[file]
       imports = imports instanceof Set ? Array.from(imports) : imports
       if (imports && imports.length > 0) {
-        files[file] = runCodemod(
-          require('./util/codemods/injectImports'),
+        files[file] = runTransformation(
           { path: file, source: files[file] },
+          require('./util/codemods/injectImports'),
           { imports }
         )
       }
 
       let injections = this.rootOptions[file]
       injections = injections instanceof Set ? Array.from(injections) : injections
       if (injections && injections.length > 0) {
-        files[file] = runCodemod(
-          require('./util/codemods/injectOptions'),
+        files[file] = runTransformation(
           { path: file, source: files[file] },
+          require('./util/codemods/injectOptions'),
           { injections }
         )
       }

packages/@vue/cli/lib/GeneratorAPI.js

@@ -5,7 +5,7 @@ const deepmerge = require('deepmerge')
 const resolve = require('resolve')
 const { isBinaryFileSync } = require('isbinaryfile')
 const mergeDeps = require('./util/mergeDeps')
-const runCodemod = require('./util/runCodemod')
+const { runTransformation } = require('vue-codemod')
 const stringifyJS = require('./util/stringifyJS')
 const ConfigTransform = require('./ConfigTransform')
 const { semver, error, getPluginLink, toShortPluginId, loadModule } = require('@vue/cli-shared-utils')
@@ -395,12 +395,12 @@ class GeneratorAPI {
         return
       }
 
-      files[normalizedPath] = runCodemod(
-        codemod,
+      files[normalizedPath] = runTransformation(
         {
           path: this.resolve(normalizedPath),
           source: files[normalizedPath]
         },
+        codemod,
         options
       )
     })

packages/@vue/cli/package.json

@@ -24,7 +24,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.9.6",
     "@vue/cli-shared-utils": "^4.4.6",
     "@vue/cli-ui": "^4.4.6",
     "@vue/cli-ui-addon-webpack": "^4.4.6",
@@ -45,7 +44,6 @@
     "isbinaryfile": "^4.0.6",
     "javascript-stringify": "^1.6.0",
     "js-yaml": "^3.13.1",
-    "jscodeshift": "^0.10.0",
     "leven": "^3.1.0",
     "lodash.clonedeep": "^4.5.0",
     "lru-cache": "^5.1.1",
@@ -56,7 +54,7 @@
     "slash": "^3.0.0",
     "validate-npm-package-name": "^3.0.0",
     "vue": "^2.6.11",
-    "vue-jscodeshift-adapter": "^2.1.0",
+    "vue-codemod": "^0.0.4",
     "yaml-front-matter": "^3.4.1"
   },
   "engines": {