是否可以将.css文件中定义的类扩展为.scss文件？

Question

例如：

app.scss

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

orange.css

.orange {  
  color: orange;  
}

navel.scss

.navel {  
    @extend .orange;  
}

Answer 1

在SASS中添加

@import "test.css";

或

@import url("test.css");

它被编译为纯css @import指令。由于该文件具有.css扩展名，因此SASS预处理器认为这是纯CSS，而内部代码不参与SASS语言操作。在您的示例中，如果您尝试扩展.orange，您将获得：

The selector ".orange" was not found.

很快：只有使用SASS文件才能进行扩展。

Answer 2

导入CSS文件无法实现@extend。你必须

1. 将您的css转换为SCSS部分（或文件）
2. @import this partial
3. @extend CSS classes

这样做的缺点是你会留下重复。假设这个导入是7000行长的CSS文件（比如bootstrap），那么你将遇到麻烦