New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problems with main.css during npm run build since 1.0.12 #602

Closed
dgracehmh opened this Issue Apr 25, 2018 · 14 comments

Comments

Projects
None yet
4 participants
@dgracehmh
Copy link
Contributor

dgracehmh commented Apr 25, 2018

Is this a bug report?

Yes

Have you read the Contributing Guidelines on issues?

yes

Environment

(Docusaurus version via npm outdated docusaurus or yarn outdated docusaurus, OS, Node, npm, yarn)
Package Current Wanted Latest Location
docusaurus 1.0.12 1.0.12 1.0.14

OS : Mac High Sierra
Node : v8.4.0
npm : 5.6.0
yarn : 1.5.1

Steps to Reproduce

  1. Update to version 1.0.12 or beyond
  2. Run npm install followed by npm run build to generate the build
  3. Since this PR - #569 - When I build and deploy my site I have css issues.
  4. When I deploy my site it does not display correctly, css is broken. In Chrome devtools console I see ```Resource interpreted as Stylesheet but transferred with MIME type test/plain: "https://www.www.www/doc-site/css/main.css"

Expected Behavior

After update to 1.0.12 and later css would work correctly.

Actual Behavior

When I deploy my site it does not display correctly, css is broken. In Chrome devtools console I see ```Resource interpreted as Stylesheet but transferred with MIME type test/plain: "https://www.www.www/doc-site/css/main.css"

Reproducible Demo

To demo this..

  1. init and build the demo site. Have a look at the generated css file.
  2. Deploy the build directory. You will see that css us broken.
@dgracehmh

This comment has been minimized.

Copy link
Contributor

dgracehmh commented Apr 25, 2018

screen shot 2018-04-25 at 09 21 09

@dgracehmh

This comment has been minimized.

Copy link
Contributor

dgracehmh commented Apr 25, 2018

screen shot 2018-04-25 at 09 21 24

@JoelMarcey

This comment has been minimized.

Copy link
Contributor

JoelMarcey commented Apr 25, 2018

@yangshun yangshun added the bug label Apr 25, 2018

@yangshun

This comment has been minimized.

Copy link
Member

yangshun commented Apr 25, 2018

@dgracehmh It could be something to do with your web server's settings. Docusaurus has been using the latest version and there aren't issues with it.

It would help if you could answer the following questions:

  1. What web server are you using for serving the CSS? Docusaurus uses GitHub pages hosting
  2. Try to run the website locally on localhost:3000. Does the warning still show and does the CSS work fine? Inspect the network tab and see the content-type of the HTTP request on your web server vs local server.
  3. Is your website or code online for us to reproduce?

I have a suspicion it is not due to the cssnano change but due to the addition of <!DOCTEXT html> in #566, which makes the browser warn about non-standard practices.

My recommendation would be to check your web server configuration that it is serving the CSS files correctly. I had to make this change to the local web server to get it to work - https://github.com/facebook/Docusaurus/pull/566/files#diff-fe37ce87a7b7b83106303bf9233b49fbR508

@dgracehmh

This comment has been minimized.

Copy link
Contributor

dgracehmh commented Apr 26, 2018

@yangshun

  1. I am using nginx to serve the site on an internal cloud via docker container.
  2. Running locally is fine.
  3. Sorry, my docs are not online. I've been deploying using exact same config (nginx + docker + Docusaurus) but when I update to 1.0.12 or beyond on the exact same config the css is broken.

I'm trying to dig in to figure out what changed since 1.0.11 to break my setup.

@yangshun

This comment has been minimized.

Copy link
Member

yangshun commented Apr 26, 2018

@yangshun

This comment has been minimized.

Copy link
Member

yangshun commented Apr 27, 2018

@darren128 Please check that your webserver is serving the CSS files using the correct HTTP content-type header - text/css and not text/plain.

Closing for now. Please reopen if you find that it is indeed a bug.

@yangshun yangshun closed this Apr 27, 2018

@darren128

This comment has been minimized.

Copy link
Contributor

darren128 commented Apr 27, 2018

@yangshun Wrong person :)

@JoelMarcey

This comment has been minimized.

Copy link
Contributor

JoelMarcey commented Apr 27, 2018

Oops. Sorry 😄

@dgracehmh ^^

@dgracehmh

This comment has been minimized.

Copy link
Contributor

dgracehmh commented Apr 27, 2018

Thanks for the pointers @yangshun : I changed my nginx configuration (content-type header - text/css) and got it working again. I guess it's handy to have a record of it here in case someone else comes up against the something similar.

@JoelMarcey

This comment has been minimized.

Copy link
Contributor

JoelMarcey commented Apr 27, 2018

@dgracehmh Or if you think there is a place in the docs we should add something, a doc update PR might be a good thing too.

dgracehmh added a commit to dgracehmh/Docusaurus that referenced this issue Apr 27, 2018

Adding info for Hosting Static HTML Pages due to recent css changes
Added a note to the documentation to help people who might come across this issue - facebook#602
@dgracehmh

This comment has been minimized.

Copy link
Contributor

dgracehmh commented Apr 27, 2018

Done @JoelMarcey , hopefully it's ok - #611

@yangshun

This comment has been minimized.

Copy link
Member

yangshun commented Apr 27, 2018

My bad @darren128

@darren128

This comment has been minimized.

Copy link
Contributor

darren128 commented Apr 27, 2018

Ha, no worries!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment