Ad

ReactJS, Webpack, ExpressJS - How To Access Styles Folder In Root

- 1 answer

I have the following folder structure ...

--- app
    --- components
    index.js
--- server
    index.js
--- data
    data.json
--- styles
    styles.css
--- images
    logo.png

In my Express server/index.js I have:

app.use(bodyParser.json({ type: 'application/json' }))
app.use(express.static(rootPath));
// styles folder is at root
app.use('/styles', express.static(rootPath));

In webpack.dev.config.js I have

  {
    test: /\.css$/,
    loader: "style-loader!css-loader!postcss-loader",
    include: rootPath
  }

While I can successfully access the json file from within the app folder's files,
I cannot access styles.css in the root folder styles from within the app folder.
This is what I have so far but I receive the error ...

Error: Cannot resolve 'file' or 'directory' /styles/styles.css

And this is what I have in my react Index.js file ....

require('/styles/styles.css');

How can I access my styles folder at the root level when coding react files in the app folder?

Ad

Answer

Since you mounted the root folder at /styles, I would imagine the URL would need to be /styles/styles/styles.css. More than likely you're looking for something more like this:

app.use(bodyParser.json({ type: 'application/json' }))
app.use(express.static(rootPath));
// mount the *contents* of the styles folder to `/styles`
app.use('/styles', express.static(path.join(rootPath, "styles")));

However, if you access the file directly, it will not be processed by webpack.

Ad
source: stackoverflow.com
Ad