无法在反应js中加载css答案

【问题标题】：unable to load css in react js无法在反应js中加载css
【发布时间】：2017-10-17 19:20:56
【问题描述】：

我所有的 css 文件都放在 src/assets/css/* 下，我正在尝试在我的组件中导入或加载 css 文件，我尝试使用以下 webpack 配置加载 css

网页包文件

{ 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> 标签

【问题讨论】：

你有什么错误吗？

标签： css reactjs webpack webpack-dev-server

【解决方案1】：

这是我的 webpack.config 文件。我使用了基础而不是引导程序，但 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'
};

是的，您可以将 css 与 webpack 捆绑在一个文件中，然后将其导入根组件中。查看我的 github 仓库以获取更多详细信息-https://github.com/hmachaharywork/ReactTodo

【讨论】：

【解决方案2】：

使用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"),
  ]

【讨论】：