@import与Sass不合并文件

Question

我是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);

在无礼的指南中说：

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规则的styles.css。

Answer 1

我通过遵循本文来使其工作：

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

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

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