Пакет Webpack не показывает css

У меня был Django с Bootstrap, который работал нормально раньше. Я пытаюсь запустить эту работу (без реагирующей части) с помощью Webpack в следующем порядке: http://owaislone.org/blog/webpack-plus-reactjs-and-django/Пакет Webpack не показывает css

Этот комплект выполнен, когда я запускаю скрипт webpack. В браузере я получаю простой HTML и поэтому пучок не используется ...

Соответствующий код

testhtml.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>This is my fantastic demo!!!</title> 
</head> 
{% load render_bundle from webpack_loader %} 

{% render_bundle 'main' %} 
<body> 
<div>"how about this?"</div> 

</body> 
</html>

webpack.config.js:

var path = require('path'); 
var webpack = require('webpack');`enter code here` 
var BundleTracker = require('webpack-bundle-tracker'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var Clean = require('clean-webpack-plugin'); 
var bootstrapPath = path.join(__dirname, 'node_modules/bootstrap/dist/css'); 

module.exports = { 
    devtool: 'eval-source-map', 
    context: __dirname, 
    entry: './assets/js/index', // entry point of our app. .assets/js/index.js should require other js modules and dependencies it needs 
    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name]-[hash].js' 
    }, 
    node: { 
     console: true, 
     fs: 'empty' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery' 
     }), 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.BannerPlugin('Banner!!!! todo'), 
     new HtmlWebpackPlugin({ 
      template: __dirname + '/assets/index.tmpl.html' 
     }), 
     new webpack.HotModuleReplacementPlugin(), 
     new Clean(['assets/bundles']) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js[x]?$/, 
       loader: 'babel', 
       exclude: /(node_modules|bower-components)/, 
       query: { 
        presets: ['es2015', 'stage-0'] 
       } 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.js$/, 
       include: path.resolve(__dirname, 'node_modules/mapbox-gl/js/render/shaders.js'), 
       loader: 'transform/cacheable?brfs' 
      }, 
      { 
       test: /\.js$/, 
       include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), 
       loader: 'worker' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style!css?modules!postcss' 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
      }, 
      /* 
      { 
      test: /\.woff$/, 
      loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]' 
      }, { 
      test: /\.woff2$/, 
      loader: 'url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]' 
      }, { 
      test: /\.(eot|ttf|svg|gif|png)$/, 
      loader: 'file-loader' 
      } 
      */ 
      {test: /\.woff(\?v=\d+\.\d+\.\d+)?2?$/, loader: 'url-loader'}, 
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader'}, 
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader'}, 
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader'} 
     ] 
    }, 
    postcss: [ 
     require('autoprefixer') 
    ], 
    resolve: { 
     modulesDirectories: ['node_modules', 'bower_components', bootstrapPath], 
     extensions: ['', '.js', '.jsx', '.css'], 
     alias: { 
      webworkify: 'webworkify-webpack', 
      '$': 'jquery', 
      'jQuery': 'jquery' 
     } 
    }, 
    devServer: { 
     contentBase: './assets', 
     colors: true, 
     historyApiFallback: true, 
     inline: true, 
     hot: true 
    } 
};

источник

2016-03-09 musicformellons

Я импортировал (эквивалент требуется при ES6) плагин, который, по-видимому, вызванные проблемы. После выхода из этого плагина django-loader-loader работал должным образом. Более подробно см .: https://github.com/owais/django-webpack-loader/issues/51

источник

2016-03-13 19:02:45 musicformellons

Вам нужны файлы css?

Используя загрузчики css и style, вы получите embed the css files в комплекте Webpack, требуя их, как и с любым другим модулем.

Если вы смотрите в документации WebPack Я связала вы увидите:

// in your modules just require the stylesheet 
// This has the side effect that a <style>-tag is added to the DOM. 
require("./stylesheet.css");// This has the side effect that a <style>-tag is added to the DOM.

источник

2016-03-12 18:07:50

Спасибо за ваш ответ. Я дам подробный ответ, который решил мою проблему. – musicformellons

Пакет Webpack не показывает css

ответ

Смежные вопросы