Adding foundation to webpack

I have followed the official tutorial to set up react, typescript and webpack from here: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Until this point it runs, fine.

Now I want to use the foundation CSS framework. So I ran npm install --save foundation

Then I modified my TSX file to look like:

import * as React from "react";
import * as ReactDOM from "react-dom";

import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(
    <a class="button" href="#">Default Button</a>,
    document.getElementById("example")
);

Finally, I ran webpack. However, when I open the generated index.html, the "button" is not there, just a link, which means the style was not applied.

In my /dist folder, I don't see anything related to css...

It seems that I'm missing something. Is there additional configuration that I have to do with webpack?

Answers


At first, foundation is installed as npm install --save foundation-sites

then you need to include foundation in your root css file like

@import 'foundation';

and finally you need to alias it inside webpack config. For example when you are using sass loader

module: {,
  sassLoader: {
    includePaths: [
      path.resolve(__dirname, "./node_modules/foundation-sites/scss")
    ]
  }

Need Your Help

Client Digest Authentication Python with URLLIB2 will not remember Authorization Header Information

python authentication urllib2 digest

I am trying to use Python to write a client that connects to a custom http server that uses digest authentication. I can connect and pull the first request without problem. Using TCPDUMP (I am on...