@import 与 Sass 不合并文件 [重复]

Posted 2023-03-06

【中文标题】@import 与 Sass 不合并文件 [重复]

【英文标题】：@import with Sass not combining files [duplicate]

【发布时间】：2014-09-04 15:53:06

【问题描述】：

我是 sass 新手，我正在尝试在 Magento 应用程序中导入父主题的 css。

我让它在一定程度上起作用，但没有达到我期望的结果。

在我的 styles.scss 文件夹中，我有：

@import "../../../rwd/default/css/styles.css";

我在终端中运行了sass --watch styles.scss:styles.css，生成的 styles.css 文件有：

@import url(../../../rwd/default/css/styles.css);

在sass guide 中写道：

CSS 有一个导入选项，可让您将 CSS 拆分为更小的、 更可维护的部分。唯一的缺点是每次你 在 CSS 中使用 @import 它会创建另一个 HTTP 请求。 Sass 构建在上面 当前 CSS @import 的一部分，但不需要 HTTP 请求， Sass 将获取您要导入的文件并将其与 您要导入的文件，以便您可以将单个 CSS 文件提供给 网络浏览器。

所以我希望 SASS 将 css 作为普通的旧 css 规则导入，而不是使用 @import 规则，所以我的 styles.css 看起来像：

/* ==========================================================================
   html5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary 
  display: block;


/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video 
  display: inline-block;


/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in ios 5 devices.
 */
audio:not([controls]) 
  display: none;
  height: 0;


/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] 
  display: none;


/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html 
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */


/*
 * Removes default margin.
 */
body 
  margin: 0;


/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus 
  outline: thin dotted;


/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover 
  outline: 0;


/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */
h1 
  font-size: 2em;


/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] 
  border-bottom: 1px dotted;


/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong 
  font-weight: bold;


/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn 
  font-style: italic;


/*
 * Addresses styling not present in IE 8/9.
 */
mark 
  background: #ff0;
  color: #000;


/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp 
  font-family: monospace, serif;
  font-size: 1em;


/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre 
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;


/*
 * Sets consistent quote types.
 */
q 
  quotes: "\201C" "\201D" "\2018" "\2019";


/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small 
  font-size: 80%;


/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup 
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;

这样我就有了一个不使用@import 规则的产品样式。

【参考方案1】：

我通过这篇文章得到了它：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

@import 默认查找要直接导入的 Sass 文件，但如果是 .css 文件或文件名是 url，它将编译为 CSS @import 规则。这两种情况对我来说都是如此。

所以我的解决方案是复制我想要导入的 css 文件并将其重命名为 rwd_styles.scss 并将我的 scss 导入规则更改为 @import "rwd_styles.scss";，它就像我希望的那样工作。

【讨论】：

你可以留下@import "rwd_styles"

为了澄清 Adam 的评论，如果您在导入 .css 文件时简单地保留扩展名，则无需将 .css 文件重命名为 .scss。