这是从3.2版本开始实现和合并的(2015年1月2日为libsass合并了#754，最初的问题定义在这里:sass#193 #556, libsass#318)。

长话短说，下面的语法:

导入(包括)原始css文件，语法是**，结尾没有' .css ' **扩展名(导致实际读取部分' s[ac]ss|css '，并将其内联到SCSS/SASS): @ import“路径/ /文件”; 以传统的方式导入CSS文件，语法按照传统的方式，**以' .css '扩展名**结尾(结果是' @import url("path/to/file.css"); '在你编译的CSS中): @ import“路径/ / file.css”;

它非常好:语法优雅简洁，而且向后兼容!它与libsass和node-sass一起出色地工作。

__

为了避免在评论中进一步猜测，明确地写下:基于Ruby的Sass在经过7年的讨论后仍然没有实现这个特性。在写这篇文章的时候，我们承诺在4.0中会有一个简单的方法来实现这一点，可能是@use的帮助。似乎很快就会有一个实现，新的“计划中的”“提案已接受”标签被分配给#556问题和新的@use特性。

UPD:在2020年10月26日，lib-sass被弃用，因此第556期立即关闭。

__

答案可能会更新，只要有一些变化。

将css文件导入到scss中只需使用this: @ import“src / your_file_path”; 没有在结尾使用扩展名.css

简单。

@import “路径/到/文件.css”;

您可以使用第三方导入器来定制@import语义。

node-sass-import-once，它与node-sass (Node.js)一起工作，可以内联导入CSS文件。

直接使用的例子:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

使用示例grunt-sass config:

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

注意，node-sass-import-once目前不能导入没有显式前导下划线的Sass部分。例如，使用文件partials/_partial.scss:

@ import泛音/ _partial。scss成功 @import * partials/partial。scss失败

一般来说，要注意自定义导入器可能更改任何导入语义。在开始使用之前请阅读文档。

如果我是正确的，css与scss兼容，所以你可以将css的扩展名更改为scss，它应该继续工作。一旦你改变了扩展名，你可以导入它，它将包含在文件中。

如果你不这样做，sass将使用css @import，这是你不想要的。

你必须在要包含的css文件前加上一个下划线，并将其扩展名切换为scss(例如:_yourfile.scss)。那么你只需要这样称呼它:

@import "yourfile";

它将包含文件的内容，而不是使用CSS标准的@import指令。