无法在react js中加载css

我的所有css文件都放在

src/assets/css/*

下，我正在尝试在我的组件中导入或加载css文件，我尝试使用下面的网页包配置加载css

网页包文件

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

组成部分

import './../../assets/css/bootstrap.min.css';

还尝试在index.html文件中加载css，如

---

另外，如果我有5-6个css文件，我不需要加载每个组件中的所有文件，比如我们可以添加

标签这是我的webpack.config文件。我使用了基础而不是引导，但是WebPoad配置是类似的。

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 repo以了解更多详细信息-

这是我的webpack.config文件。我使用了基础而不是引导，但是WebPoad配置是类似的。

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回购-

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

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

---

你有错误吗？你有错误吗？