使用SCSS和CSS

Question

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

因此，这不起作用。

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

Answer 1

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

根据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文件中