Question

我使用Sass作为样式。当我尝试编译这部分代码时：

.heart {
  width: $size * 2;
  height: $size * 1.65;
  cursor: pointer;

  &:before {
    position: absolute;
    content: "";
    left: $size;
    width: $size;
    height: $size * 1.65;
    background: #fff;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  &:after {
    @extend .heart:before;
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
  }
}

我收到了这条消息：

@extend .heart:before;
Error: compound selectors may longer be extended.
Consider `@extend .heart, :before` instead.
See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extending_compound_selectors for details.

@extend .heart:before;

它不会使用终端进行编译，但它可以通过Prepros应用程序进行编译和工作。当我尝试使用sass命令编译时，为什么它不起作用的任何想法？

我使用了这个例子：https://codepen.io/souporserious/pen/yEntv

Answer 1

我认为你需要像这样创建一个占位符;另外我知道在2016年左右使用@extand和伪元素进行命令行编译时会出现一些错误。

%placeholder {
    position: absolute;
    content: "";
    left: $size;
    width: $size;
    height: $size * 1.65;
    background: #fff;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart {
  width: $size * 2;
  height: $size * 1.65;
  cursor: pointer;

  &:before {
    @extend %placeholder;
  }
  &:after {
    @extend %placeholder;
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
  }
}

Answer 2

对于角度8

npm install node-sass --save-dev

应该尝试；也用

npm remove sass

并配置为仅在webpack.prod.js中使用node-sass

   const sass = require('node-sass');
   ...
   {
        test: /\.scss$/,
        use: ['to-string-loader', 'css-loader', {
            loader: 'sass-loader',
            options: { implementation: sass }
        }],
        exclude: /(vendor\.scss|global\.scss)/
    },

按照某些github问题中的描述，仅添加node-sass答案并没有帮助我，我被迫删除sass并明确指向node-sass实现

尝试编译SASS代码时出错

2 个答案: