是否可以在.scss文件中@extend一个在.css文件中定义的类？

Question

例如：

app.scss

@import url('orange.css');  
@import 'navel.scss';

orange.css

.orange {  
  color: orange;  
}

navel.scss

.navel {  
    @extend .orange;  
}

- Elise Chant

Answer 1

在SASS中，如果你添加了

@import "test.css";

或者

@import url("test.css");

这段代码被编译成了纯CSS的@import指令。由于文件扩展名为.css，SASS预处理器认为这是纯CSS，文件内部的代码不会参与SASS语言操作。举个例子，如果你尝试继承.orange，你会得到以下结果：

The selector ".orange" was not found.

简而言之，只有使用SASS文件才能进行扩展。

- Krasimir

Answer 2

通过导入CSS文件无法使用@extend。您需要将CSS转换为SCSS部分(或文件)

1. 将CSS转换为SCSS部分(或文件)
2. @import这个部分
3. @extend CSS类

缺点是会有重复。假设此导入是一个7000行长的CSS文件(如bootstrap)，那么您将会遇到麻烦

- Vinay Raghu