ReactJS、Webpack、ExpressJS - 如何访问根目录中的样式文件夹
ReactJS, Webpack, ExpressJS - How to access styles folder in root
我有以下文件夹结构...
--- 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 文件夹?
由于您将根文件夹安装在 /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不会对其进行处理。
我有以下文件夹结构...
--- 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 文件夹?
由于您将根文件夹安装在 /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不会对其进行处理。