在SCSS文件中导入普通的CSS文件?

15 浏览
0 Comments

在SCSS文件中导入普通的CSS文件?

是否有办法使用Sass的@import命令导入普通的CSS文件?虽然我没有使用Sass的所有SCSS语法,但我仍然喜欢它的合并/压缩功能,并希望能够在不将所有文件重命名为*.scss的情况下使用它。

0
0 Comments

问题出现的原因:

在SCSS文件中导入常规的CSS文件时,不能直接使用import语句来导入,而是需要使用其他方法来解决。

解决方法:

1. 对于libsass(C/C++实现),可以使用与导入SCSS文件相同的方式导入CSS文件,只需省略文件扩展名。例如:`@import "path/to/file";` 将会导入`path/to/file.css`。(来源:Stack Overflow)

2. 如果使用Gulp或Grunt,可以使用其他工具来导入CSS文件,例如gulp-import-css。(来源:Stack Overflow)

3. 对于libsass,至少在某些版本中是可以正常工作的。可以参考相关的Stack Overflow答案和PR链接获取更多信息。(来源:Stack Overflow)

4. 可以将CSS文件重命名为SCSS文件,这样就可以在主SCSS文件中使用`@import 'MyCSSImportFile';`,从而实现SCSS和CSS的内联合并。(来源:Stack Overflow)

另外,需要注意的是,从Sass 3.5.3开始,libsass警告说这种非标准行为不应该依赖,而是应该使用自定义导入器来保持这种行为。(来源:GitHub)

需要注意的是,以上解决方法中的某些方法可能已经过时或不再适用于当前的环境。

0
0 Comments

如何在SCSS文件中导入常规CSS文件?

问题的出现原因是,在Ruby版本的Sass中,无法直接导入CSS文件。这个问题在Sass的讨论中已经持续了7年,但至今仍未得到解决。然而,在libsass和node-sass中,这个功能是可行的。

解决方法是使用以下语法:

1. 导入(包含)原始CSS文件,语法为不带有`.css`扩展名的路径,将会实际读取`s[ac]ss|css`文件并将其内联到SCSS/SASS中:

"path/to/file";

2. 以传统方式导入CSS文件,语法为带有`.css`扩展名的路径,将会在编译后的CSS中生成`url("path/to/file.css");`:

"path/to/file.css";

这种语法简洁而优雅,并且向后兼容,非常适用于libsass和node-sass。

需要注意的是,这个功能仅适用于libsass和node-sass,对于Ruby版本的Sass仍未实现。根据承诺,当4.0版本发布时,可能会通过`@use`标签来实现这个功能。

需要注意的是,如果文件名是类似于`file.min.css`这样的形式,省略`.css`扩展名可能会导致导入失败。

总之,导入常规CSS文件到SCSS中的功能在libsass和node-sass中得到了实现,但在Ruby版本的Sass中尚未实现。希望在将来的版本中能够提供这个功能。

0
0 Comments

问题的原因是:在SCSS文件中无法直接导入CSS文件。

问题的解决方法是:在SCSS文件中使用特定的语法导入CSS文件。语法是"your/path/to/the/file",文件名后面不需要添加扩展名。如果在文件名后面添加*.css,它会被转换为css规则url(...)。对于使用模块打包工具(如webpack)的情况,需要在路径前面使用~符号。例如,要导入路径"node_modules/bootstrap/src/core.scss",可以写成"~bootstrap/src/core"。

然而,并不是所有的解释器都支持这种导入方式。基于libsass的解释器应该是可以工作的,但在某些ruby实例中可能会出现问题。这个问题在libsass中已经被实现了,但在使用ruby实现的sass时,似乎只有在引入了sass-css-importer的情况下才能正常工作。

某些情况下使用最新版本的sass可以解决问题,同时也要确保没有在文件名后面添加扩展名。另外,可能需要检查导入路径是否正确和可访问。

对于使用Jekyll的情况,由于它使用的是ruby sass,所以无法使用这种导入方式。

在文件名有相同但扩展名不同的情况下,可能会导致导入文件出错。

关于是否需要在被导入的文件前面加下划线的问题,答案是不需要。只需要写成"path/to/the/style"即可。

在使用normalize.css时可能会出现问题,因为它的包名是normalize.css而不是normalize。可以使用"node_modules/normalize.css"进行导入,也可以在配置includePaths时省略node_modules。

这个解决方法适用于导入供应商提供的CSS文件。

如果在编译/压缩后的CSS文件中,导入的CSS文件被放在了错误的位置,可以尝试配置压缩器的设置来保持正确的顺序。

如果遇到其他问题,建议开启一个新的问题,详细说明使用的scss版本(darts、nodejs还是ruby),是否使用了webpack和压缩工具(以及具体使用的哪些工具)。如果使用了webpack和压缩工具,可能需要配置压缩工具的设置来避免优化导入顺序。

0