无法在react js中加载css
无法在react js中加载css
提问于 2017-05-18 14:15:24
我所有的css文件放置在src/assets/css/*下，我正在尝试导入或加载css文件在我的组件中，我已经尝试加载css与下面的webpack配置
Webpack文件
{ test: /\.css$/, loader: "style-loader!css-loader" }组件
import './../../assets/css/bootstrap.min.css';我还尝试在index.html文件中加载css，如<link rel="stylesheet" href="/src/assets/css/bootstrap.min.css">
另外，有没有一种方法，如果我有5-6个css文件，我不需要加载每个组件中的所有文件，如果我们可以添加<head>标签
回答 2
Stack Overflow用户
发布于 2017-05-19 07:09:29
这是我的webpack.config文件。我使用的是foundation而不是bootstrap，但webpack的配置与此类似。
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/js/foundation.min.js',
'./app/app.jsx'
],
externals: {
jquery: 'jQuery'
},
plugins:[
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
})
],
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
modulesDirectories: [
'node_modules',
'./app/components',
'./app/api'
],
alias: {
applicationStyles: 'app/styles/app.scss',
actions: 'app/actions/actions.jsx',
reducers: 'app/reducers/reducers.jsx',
configureStore: 'app/store/configureStore.jsx'
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
test:/\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
},
sassLoader:{
includePaths: [
path.resolve(__dirname, './node_modules/foundation-sites/scss')
]
},
devtool: 'cheap-module-eval-source-map'
};是的，您可以使用webpack将css捆绑在一个文件中，然后将其导入到根组件中。有关更多详细信息，请查看我的github存储库- https://github.com/hmachaharywork/ReactTodo
Stack Overflow用户
发布于 2017-05-20 07:37:03
使用Extract text plugin。仅在您的webpack.conf.js中导入此插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");并重构您的规则，如下所示：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}最后，在插件列表中推送新实例：
plugins: [
new ExtractTextPlugin("styles.css"),
]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44039931
复制相关文章
相似问题
腾讯云开发者
