ReactJS、Webpack、ExpressJS - 如何访问根目录中的样式文件夹

Question

我有以下文件夹结构...

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

在我的 Express server/index.js 中我有：

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

在webpack.dev.config.js我有

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

虽然我可以从应用程序文件夹的文件中成功访问 json 文件，
我无法从应用程序文件夹.
访问根文件夹样式中的 styles.css 这是我到目前为止所拥有的，但我收到错误 ...

错误：无法解析 'file' 或 'directory' /styles/styles。css

这就是我的反应 Index.js 文件中的内容....

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

在 app 文件夹中编写 React 文件时，如何在根级别访问我的 styles 文件夹？

Answer 1

由于您将根文件夹安装在 /styles，我想 URL 需要是 /styles/styles/styles.css。您很可能正在寻找更像这样的东西：

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")));

但是，如果直接访问该文件，webpack不会对其进行处理。

ReactJS、Webpack、ExpressJS - 如何访问根目录中的样式文件夹

ReactJS, Webpack, ExpressJS - How to access styles folder in root

express

reactjs

webpack