文章/答案/技术大牛

发布

社区首页 >问答首页 >在我的VueJS应用程序中，`/deep/`选择器没有使用sass加载程序。

问在我的VueJS应用程序中，`/deep/`选择器没有使用sass加载程序。
EN

Stack Overflow用户

提问于 2021-05-02 12:49:04

回答 2查看 9.8K关注 0票数 3

在我的Vue 2.6.10 webpack应用程序中，我试图添加SASS，因为我们的团队希望将我们的遗留应用程序从LESS迁移到SCSS。在我的package.json中，我在devDependencies上安装了这些文档

sass (v.1.32.8)
sass-装载机(v10.1.1)

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

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

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

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

耶！它在我的操场上工作得很好，使用的是我在操场上控制的相同版本的东西。

在我的应用程序中，当我尝试完全相同的设置时，我会得到以下编译错误：

./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

根据我尝试过的许多其他建议，我应该尝试使用::v-deep或>>>。当我尝试使用这些选择器时，它编译得很好，不再抛出异常，但是什么也不会发生。实际上，没有CSS像.parent[data-23423423] .child {}那样呈现。但是，我看到了其他物品是如何在SCSS中不支持这一点的。

于是，我又回到了试图找出导致这个错误的原因的问题上，在过去的几天里，我尝试了几十件事情，试图解决这个问题，比如：

降级节点- sass /sass/sass-加载程序版本到其他版本，以尝试工作。
npm rebuild node-sass --force
rimrafing node_modules
清除整个npm cache和许多其他事情

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

css-加载程序(v.3.1.0)
减(v3.0.4)
小型装载机(v4.1.0)
迷你-css-提取-插件(v0.6.0)
优化-css-资产-webpack插件(5.0.3)
postcss-导入(v11.0.0)
postcss-加载程序(v2.0.8)
postcss-url (v7.2.1)
vue风格的装载机(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/选择器工作？

sass

vuejs2

css

vue.js

webpack

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-02 13:27:50

这是因为/深/不受sass支持。您需要显式地设置您的sass-loader，以便像这样使用node-sass：

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

sass-loader在他们的网页上有一条注释说：

注意在安装节点sass和sass时的情况！默认情况下，sass加载器更喜欢sass.，为了避免这种情况，可以使用实现选项。实现选项要么接受sass (Dart Sass)，要么接受节点sass作为一个模块。

因此，您的特定代码将以sass-loader使用的方式结束：

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

票数 3

Stack Overflow用户

发布于 2022-09-07 06:07:21

由于角度构建版本错配，大多数新的角度构建都面临着同样的问题。我们可以用在下面，

:host：：ng-，而不是/deep/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67356599

复制

相似问题

问在我的VueJS应用程序中，`/deep/`选择器没有使用sass加载程序。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在我的VueJS应用程序中，`/deep/`选择器没有使用sass加载程序。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在我的VueJS应用程序中，`/deep/`选择器没有使用sass加载程序。
EN