css - `/deep/` 选择器无法在我的 VueJS 应用程序中使用 sass-loader

Question

在我的 Vue 2.6.10 webpack 应用程序中，我尝试添加 SASS，因为我们的团队希望将我们的遗留应用程序从 LESS 迁移到 SCSS。在我的 package.json 中，我根据这些 docs 将它们安装到我的 devDependencies :

• sass (v.1.32.8)
• sass 加载器 (v10.1.1)

然后将 node-sass (v5.0.0) 安装到我的dependencies。

我的 node 版本是:v15.4.0。根据这些docs这是 node-sass v5+ 的正确版本。

在我的 Vue 组件中，我尝试使用 /deep/、::v-deep 或 >>> 选择器。我拼凑了一个工作playground我有一个 ParentComp.vue 目标 ChildComp.vue 的内部样式使用 /deep/ 像这样:

<style lang="scss" scoped>
  .parent-container {
    & /deep/ .child-comp {
      background-color: tomato;
      color: white;
    }
  }
</style>

耶!它在我的 playground 中使用我在 playground 中控制的相同版本的东西，效果很好。

在我的应用程序中，当我尝试这个完全相同的设置时，我得到了这个编译错误:

./src/components/MenuBarComp.vue (./node_modules/css-loader/dist/cjs.js?
{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?
{"optionsId":"0","vue":true,"id":"data-v-4630c6ac","scoped":true,"sourceMap":true}!
./node_modules/sass-loader/dist/cjs.js?
{"additionalData":"/n          @import /"@/styles/_variables.scss/";/n        ","sourceMap":true}!
./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/MenuBarComp.vue)


Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
   ╷
77 │   & /deep/ .child-test{
   │     ^
   ╵
  src/components/MenuBarComp.vue 77:5  root stylesheet

根据许多其他suggestions我已经尝试过了，我应该尝试使用 ::v-deep 或 >>>。当我尝试使用这些选择器时，它编译得很好并且不再抛出异常，但没有任何反应。没有 CSS 实际上呈现为 .parent[data-23423423] .child {}。但后来我看到other articles关于 SCSS 不支持它的原因。

然后我回去尝试找出可能导致此错误的原因，并且在几天的时间里我尝试了很多事情来尝试解决此问题，例如:

• downgrading node-sass/sass/sass-loader 版本到其他版本以尝试让事情正常工作
• npm rebuild node-sass --force
• rimrafing node_modules
• 清除整个 npm 缓存 和许多其他东西

我的 package.json 中已经有几个预先存在的 CSS 相关包:

• css-loader (v.3.1.0)
• 更少(v3.0.4)
• 较少加载程序 (v4.1.0)
• 迷你 css 提取插件 (v0.6.0)
• 优化-css-assets-webpack-plugin (v5.0.3)
• postcss 导入 (v11.0.0)
• postcss-loader (v2.0.8)
• postcss-url (v7.2.1)
• vue-style-loader (v3.0.1)

最后是我的加载器在 webpack 中的设置方式:

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS
      ? [cssLoader, postcssLoader]
      : [cssLoader];

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap,
        }),
      });
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return [MiniCssExtractPlugin.loader].concat(loaders);
    } else {
      return ['vue-style-loader'].concat(loaders);
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass'),
    scss: generateLoaders('sass', {
      additionalData: `
          @import "@/styles/_variables.scss";
        `,
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus'),
  };
};

如何让 /deep/ 选择器起作用？

Answer 1

这是因为 /deep/ 不受 sass 支持。您需要显式设置您的 sass-loader 以使用 node-sass，如下所示:

loader: 'sass-loader', options: { implementation: require('node-sass')

sass-loader 在 their page 上有注释上面写着:

Beware the situation when node-sass and sass were installed! Bydefault the sass-loader prefers sass. In order to avoid this situationyou can use the implementation option.

The implementation options either accepts sass (Dart Sass) ornode-sass as a module.

所以你的特定代码最终会像 sass-loader 那样使用:

scss: generateLoaders('sass', {
  implementation: require('node-sass'),
  additionalData: `
      @import "@/styles/_variables.scss";
    `,
}),