Why replace?

  • 1: The Node-sass repository is outside the wall, and new features are implemented in Dart-Sass first
  • 2: It is not only compatible with CSS ‘>>>’, but also compatible with sass ‘/deep/’, and the original ‘/deep/’ is deprecated by Chrome itself. You can now often find Chrome warnings in the console telling you not to use ‘/deep/’.

    • How to replace:

    1: uninstall the node – sass 
    // First method: delete node-sass from package.json. It is recommended to uninstall the installation dependency again after uninstallation. Second method: NPM uninstall node-sass yarn remove node-sassCopy the code
    2: install the dart – sass 
      // npm
  npm install --dev sass 
  
  // yarn
  yarn add sass --dev
Copy the code
    3: Configure the vue.config.js file 
    Module.exports = {CSS: {loaderOptions: {sass: {implementation:}} module.exports = {CSS: {loaderOptions: {sass: {implementation:}} require('sass'), // This line must in sass option }, }, } }Copy the code
    4: Global search (/deep/ and >>>) is replaced with ::v-deep
    Note:
  • An error will be reported if vue2.0 before Vue3.0 you used /deep/ without replacement
  • If the console reports the following error, it may be that the ‘sass-Loader’ version is too old. It is recommended to update the version to ‘7.1.0 +’
    • Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
   at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
   at Function.Module._load (internal/modules/cjs/loader.js:507:25)
   at Module.require (internal/modules/cjs/loader.js:637:17)
   at require (internal/modules/cjs/helpers.js:22:18)
   at Object.sassLoader (/path-of-your-project-directory/node_modules/sass-loader/lib/loader.js:24:22
Copy the code
  • Stylelint is used in the project, so the verification rule may need to be modified. The code in stylelint.config.js is as follows
    • module.exports = {
  rules: {
    'selector-pseudo-element-no-unknown': [ true,
      {
        ignorePseudoElements: ['v-deep'],
      }
    ],
  },
Copy the code