Question

当我设置如下时，它可以正常工作。我正在使用django-webpack-loader

的index.html

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Jayground</title>
        {% render_bundle 'main' 'css' %}
    </head>

    <body>
        <div id="react-app"></div>
        {% render_bundle 'main' 'js' %}
    </body>
</html>

Header.js

import styles from './header.css';

export default class Header extends React.Component {
    render(){
        <div className="header">
            hello
        </div>
    }
}

webpack.config.js（我分别创建了styles.css，然后分别在html中加载css文件，以便className =＆＃34; header＆＃34;有效。）

config.plugins = config.plugins.concat([
    new ExtractTextPlugin('styles.css'),
]);

config.module.rules.push(
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            use: 'css-loader'
        })
    }
)

根据我的理解，下面的代码也应该有用。如果我不使用ExtractTextWebpackPlugin来分离css文件，那么bundle js文件就像这样有css信息。

exports.push([module.i, ".header {\r\n  background-color: blue;\r\n}\r\n\r\n.extra {\r\n\tfont-size: 50;\r\n}", ""]);

css应该正确加载。

Header.js

import styles from './header.css';

export default class Header extends React.Component {
    render(){
        <div className={styles.header}>
            hello
        </div>
    }
}

webpack.config.js

config.module.rules.push(
    {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }
)

我是否错过了正常工作的内容？

django webpack loader设置加载css

0 个答案: