Gulp build outputs invalid CSS.

sanny-io
创建于
2019-02-12 23:51:27

Gulp build outputs invalid CSS.

The -- in the "Actual Result" area below is a CSS error. There are a couple more areas where those hyphens show up. I've taken a random one as an example.

Steps

npm install semantic-ui --save
cd semantic/
gulp build

Expected Result (from downloaded zip)

.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
  left: calc( 0.05rem  -  1.2em );
}

Actual Result (from gulp build)

.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
  left: calc(--0.05rem - 1.2em);
}

Version

gulp 4.0.0
gulp CLI 2.0.1
npm 6.7.0
Ubuntu 18.04

5条回答
hammy2899
回复于
2019-02-13 08:17:30
#1

Try using the following commands

$ npm install --save semantic-ui
$ cd semantic/
$ npx gulp build

This will use the gulp version installed with semantic and should therefore build correctly.

sanny-io
回复于
2019-02-13 19:40:42
#2

Doesn't appear to fix the problem, unfortunately. Still builds with the hyphens.

sanny-io
回复于
2019-02-15 10:46:59
#3

So I started a new project and installed semantic there. Somehow, it properly built itself with gulp build.

Here is a comparison of the old project's (bad) CSS and the new project's (good) CSS.

It looks like some expressions aren't being simplified, and as result, produce invalid CSS.

Oddly enough, when I try making yet another project and building semantic, it goes back to the old bad way.

hammy2899
回复于
2019-02-15 12:04:08
#4

@sannysc Try using Fomantic-UI because we have fixed a lot of invalid CSS/LESS errors.

sanny-io
回复于
2019-02-15 23:05:16
#5

Thanks, that works for me. I didn't know this repo was stale. You might want to leave this issue open, though.

当前位于第1页,总计5 条回复

推荐相似问题

Javascript Heap out of memory when compiling with Webpack

I'm using Semantic UI in a React application. When building the project with Webpack, I get the following error message:
讨论数 6
Semantic-UI
创建时间:2019-02-12 08:35:18

[sidebar] Sidebar with overlay class should close and reopen

Steps Add a close button to the sidebar and an open button in the pusher div the sidebar should have the following class
讨论数 2
Semantic-UI
创建时间:2019-02-07 22:38:13

[modal] Second modal not showing if call "show" from onApprove of firrst modal

Steps Create two modals. Both with "allowMultiple: true". First with "ok" action button Add First::OnApprove with code t
讨论数 3
Semantic-UI
创建时间:2019-01-28 10:30:42

npm install semantic-ui --save hangs on Windows 10

Steps npm install semantic-ui --save Select automatic installation Select default installation folder (semantic/) Expect
讨论数 3
Semantic-UI
创建时间:2019-01-27 06:57:07

Transitions not working with minified CSS

Hi, Transitions are not working for minified CSS, but do work if the un-minified file is used. My setup is the latest ve
讨论数 3
Semantic-UI
创建时间:2019-01-25 09:34:19

semantic-ui.cn domain expired

点击查看更多信息
讨论数 2
Semantic-UI
创建时间:2019-01-21 13:47:53

[Accordion] - Accordion content with script

Steps to Reproduce If div.content has child script, will see javascript content text Solution In component library, for
讨论数 2
Semantic-UI
创建时间:2019-01-21 09:23:25

Icon link problem

Hey. I found an issue when i try to use class "link" on icon. The main problem is, for some icons, when i put the class
讨论数 6
Semantic-UI
创建时间:2019-01-20 10:33:48

[Icon] - Icons in 2.4 are bolder than in Font Awesome 5

Steps I am aware that the icon set was upgraded to Font Awesome 5 in latest releases, which made my application looks wo
讨论数 9
Semantic-UI
创建时间:2019-01-17 09:45:08

styles should not depend on order of class

Steps https://jsfiddle.net/y8L6h5c9/ Expected Result Both button should float right. Actual Result If right floated is n
讨论数 2
Semantic-UI
创建时间:2019-01-14 15:02:30