ven*_*ter 63 html javascript css reactjs
正如标题所说,我想将CSS文件导入反应组件.我尝试过以下方法:
import disabledLink from "../../../public/styles/disabledLink";
但错误告诉我这个:
找不到模块:错误:无法解析c:\ Users\User\Documents\pizza-app\client\src\components @中的'file'或'directory'../../../public/styles/disabledLink. /client/src/components/ShoppingCartLink.js 19:20-66
哈希:2d281bb98fe0a961f7c4
版本:webpack 1.13.2
该文件位于此路径中:
C:\用户\用户\文档\比萨饼的应用程序\客户端\ PUBLIC \风格\ disabledLink.css
对我而言,似乎导入并没有找到正确的路径.我想../../../它会开始查找上面三个文件夹层的路径.
应该导入CSS文件的文件位于:
C:\用户\用户\文档\比萨饼应用内\客户\ SRC \部件\ ShoppingCartLink.js
感谢您的任何意见!
Ryu*_*yuk 112
如果您不需要,您甚至不需要命名:
例如
import React from 'react';
import './App.css';
在这里看一个完整的例子https://egghead.io/lessons/build-a-jsx-live-compiler
Ale*_*rev 47
在使用wepback创建bundle时,您需要使用css-loader.
安装它:
npm install css-loader --save-dev
并将其添加到webpack配置中的加载器:
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
// ...
]
}
};
在此之后,您将能够在js中包含css文件.
Mih*_*tel 24
我建议使用CSS模块:
应对
import React from 'react';
import styles from './table.css';
export default class Table extends React.Component {
render () {
return <div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>A0</div>
<div className={styles.cell}>B0</div>
</div>
</div>;
}
}
渲染组件:
<div class="table__table___32osj">
<div class="table__row___2w27N">
<div class="table__cell___2w27N">A0</div>
<div class="table__cell___1oVw5">B0</div>
</div>
</div>
Web*_*ars 16
以下内容在React组件中导入外部CSS文件,并<head />在网站中输出CSS规则.
npm install --save-dev style-loader
npm install --save-dev css-loadermodule.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
import './path/to/file.css';上述解决方案已完全更改和弃用。如果您想使用 CSS 模块（假设您导入了 css-loaders），并且我一直在尝试为此寻找答案很长时间并最终做到了。默认的 webpack 加载器在新版本中完全不同。
在你的 webpack 中，你需要找到一个以 cssRegex 开头的部分，并用这个替换；
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
}