小编Ree*_*eed的帖子

我正在尝试将 webpack 与 postcss 一起使用来导入包含我的 css 自定义变量的 theme-variables.css 文件。

//theme-variables.css
:root {
    --babyBlue: blue;
}

基本上我希望任何导入主题变量的 css 能够访问这些 css 自定义属性并使用 postcss-css-variables 解析为静态值。

//style.css
@import "./theme-variable.css";

div {
    display: flex;
    color: var(--babyBlue);
}

变成

//main.css
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: blue;
}

但是我不断收到 webpack 错误 variable --babyBlue is undefined and used without a fallback

main.js 最终看起来像这样：

:root {
    --babyBlue: blue;
}
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: undefined;
}

这是我的 webpack（index.js 需要styles.js）：

const path …

我正在尝试将字体“Montserrat”导入到我的 Angular4 项目中，但它只是重置为标准。

这是我的 style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

.fancyFont {
  font-family: 'Montserrat';
}

还有我的friend.component.html

<p class="fancyFont">Look at my Fanciness</p>