CODEWITHSUNDEEP
reactjstypescriptwebpackzurb-foundation
Minas Mina
Minas Mina

Reputation: 2107

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?

Upvotes: 0

Views: 690

Answers (1)

Milos Mosovsky
Milos Mosovsky

Reputation: 2983

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")
    ]
  }

Upvotes: 1

Related Questions