Question

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

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>标记

Answer 1

这是我的webpack.config文件。我使用的是基础而不是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

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

无法在反应中加载css

2 个答案: