使用 SCSS 和 CSS答案

【问题标题】：Using SCSS and CSS使用 SCSS 和 CSS
【发布时间】：2017-07-04 05:39:26
【问题描述】：

我在style.css有一个风格

#someid{
   color:red;
}

我必须将此样式移动到 SCSS 文件中

基本上我有一个 SCSS 文件 _form.scss，看起来像这样

.someclass{
    &-title {
        margin: 0.5em 0em;
        padding-bottom: 0.5em;
        border-bottom: 1px solid $color-border-3;
    }

    .fc {
        margin: 1em 0 1em 0;
        width: 100%;

        label {
            display: block;
            padding-bottom: 0.5em;
        }
    }
}
#someid{
    color:red;
}

所以这不起作用。

如何在 scss 文件中运行新的更改，以便它反映到我的应用程序中
我使用npm install -g scss-compile 编译SCSS 并运行npm run scss-compile。这似乎也不起作用。
现在如何将我的 style.css 迁移到 scss 文件

【问题讨论】：

直接使用node-sass包。您用于编译的 npm 包不再维护。阅读命令行界面部分以获取设置信息。 github.com/sass/node-sass

标签： css command-line npm sass styles

【解决方案1】：

如何在 scss 文件中运行新更改，以便它反映到我的应用。我使用 npm install -g scss-compile 编译 SCSS 并运行 npm 运行 scss 编译。这似乎也不起作用。

根据 scss-compile 的文档，在安装 scss-compile 后，您还应该在 package.json 中添加“scss-compile”脚本：

 ...
"devDependencies": {},
"scripts": {   
  "scss-compile": "node-sass _form.scss > result.css",
 },
...

现在“npm run scss-compile”将导致从您的 _form.scss 生成 result.css。

现在如何将我的 style.css 迁移到 scss 文件

您的 _form.scss 有效（未定义变量 $color-border-3 除外）。规则很简单：“任何有效的 css 都是有效的 scss”，所以您只需将您的工作 css 代码复制粘贴到 scss 文件

【讨论】：