Question

我在网上搜索了此错误消息，从字面上搜索了每个问题，但没有一种解决方案有效，也与我的问题无关。这些都是我采取的所有步骤：

在终端上，我进入Sites文件夹并输入以下代码：

compass create project1

然后我cd进入sass文件夹并输入以下内容：

sass --watch styles.scss:styles.css

然后我收到此错误消息：

error styles.scss (Line 1: File to import not found or unreadable: compass/css3.)

因此，我cd到我的project1文件夹中，然后键入compass watch来查看它是否有任何作用，并显示：

Compass is watching for changes. Press Ctrl-C to Stop.

所以那里没有错误。我什至通过输入compass -v来检查是否安装了Compass并得到了这个信息：

Compass 1.0.3 (Polaris)
Copyright (c) 2008-2019 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

..这意味着已经安装了指南针。我还忘了提及，我第一次在Terminal上进行compass compile时，得到了整个错误消息（我复制了所有内容）：

CSs-MacBook-Pro：newproject CS $罗盘编译

/Users/cs/.rvm/gems/ruby-2.6.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss的第87行上的DEPRECATION警告：

＃{}运算符附近的插值将在Sass的未来版本中简化。   要保留当前行为，请使用引号：

unquote（'“ $ moz-”＃{$ experimental-support-for-mozilla}“ $ webkit-”＃{$ experimental-support-for-webkit}“ $ opera-”＃{$ experimental-support- for-opera}“ $ microsoft-”＃{$ experimental-support-for-Microsoft}“ $ khtml-”＃{$ experimental-support-for-khtml}'）

您可以使用sass-convert命令自动修复大多数情况。

/Users/cs/.rvm/gems/ruby-2.6.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss的第92行上的DEPRECATION警告：

＃{}运算符附近的插值将在Sass的未来版本中简化。   要保留当前行为，请使用引号：

unquote（'“ $ ie6-”＃{$ legacy-support-for-ie6}“ $ ie7-”＃{$ legacy-support-for-ie7}“ $ ie8-”＃{$ legacy-support- for-ie8}'）

您可以使用sass-convert命令自动修复大多数情况。

编写stylesheets / styles.css

CSs-MacBook-Pro：newproject cs $

因此，我在github上遵循了用户 mrpatricko 的解决方案： https://github.com/Compass/compass/issues/2052修复了 just “ DEPRECATION WARNING”消息。但是它 still 不能解决我得到的主要错误。我仍然看到“文件导入”错误。我不知道从这里还能做什么。我觉得我尝试了一切。有人可以帮忙吗？此处包含完整代码：

@import "compass/css3";

@import "compass";
@import url("https://fonts.googleapis.com/css?family=Lato");

$background: #e74c3c;
$select-color: #fff;
$select-background: #c0392b;
$select-width: 220px;
$select-height: 40px; 

body { 
  font-family: Lato, Arial;
  color: $select-color;
  padding: 20px;
  background-color: $background;
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  span { 
    font-size: 13px;
    display: block;
    padding-left: 4px;
  }
}
p {
  margin-top: 200px;
  a {
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: darken($select-background, 2);
    @include transition(all 0.2s ease-in);
    &:hover {
      background-color: darken($select-background, 5);
    }
  }
}
.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: $select-color;
  width: $select-width;
  height: $select-height;
}
.select-styled {
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $select-background;
  padding: 8px 15px;
  @include transition(all 0.2s ease-in);
  &:after {
    content:"";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: $select-color transparent transparent transparent;
    position: absolute;
    top: 16px;
    right: 10px;
  }
  &:hover {
    background-color: darken($select-background, 2);
  }
  &:active, &.active {
    background-color: darken($select-background, 5);
    &:after {
      top: 9px;
      border-color: transparent transparent $select-color transparent;
    }
  }
}

.select-options {
  display: none; 
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: darken($select-background, 5);
  li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-top: 1px solid darken($select-background, 10);
    @include transition(all 0.15s ease-in);
    &:hover {
      color: $select-background;
      background: $select-color;
    }
    &[rel="hide"] {
      display: none;
    }
  }
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
    <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link href="/stylesheets/styles.css" media="print" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Custom Select <span>Without Plugin</span></h1>
<!--
TO DO:
1. Add icons to List 
2. Toogle opened state
-->

<select id="mounth">
    <option value="hide">-- Month --</option>
    <option value="january" rel="icon-temperature">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select> 

<select id="year">
    <option value="hide">-- Year --</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
</select>

<p>See the <a href="https://codepen.io/wallaceerick/pen/fEdrz">Custom File Upload</a> demo!</p> 

</body>
</html>

遇到错误，找不到导入文件或导入文件不可读：罗盘/ css3

0 个答案: