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

在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;
}

这样我就会有一个关于制作的styles.css，它没有使用@import规则。

Answer 1

我按照这篇文章开始工作：

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

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

所以我的解决方案是复制我想导入的css文件＆amp;重命名为rwd_styles.scss＆amp;将我的scss导入规则更改为@import "rwd_styles.scss";，并且它按照我的希望工作。

@import与Sass没有合并文件

1 个答案: