javascript - Webpack 从 .jsx 文件中删除 css？

Question

我的 webpack 文件看起来像这样(注意 - 现在 - 我需要创建 Assets 的缩小版本和非缩小版本 - 所以这不是一个错误):

const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const readSass = new ExtractTextPlugin({
    filename: "foo/bar/style.min.css"
});

    config = {
        entry: {
            "main": './main.js',
            "main.min": './main.js',
            "style.min": './style.scss'
        },
        watch: true,
        devtool: "source-map",
        output: {
            path: path.resolve(__dirname, '/dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/i,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: {
                        presets: ['es2015', 'react'],
                        minified: true
                    }
                },
                {
                    test: /\.scss|css$/,
                    use: readSass.extract({
                        use: [{
                            loader: "css-loader", options: { minimize: true }
                        }, {
                            loader: "sass-loader"
                        }]
                    })
                }
            ],
        },
        plugins: [
            readSass,
            new UglifyJsPlugin({
                include: /\.min\.js$/
            })
        ],
    }

    module.exports = config;

一切都按预期进行，但有一件事让我烦恼。

在我的一些 .jsx 文件中，我从不同的第三方组件加载了 CSS 模块，例如:

导入'react-plugin/react-plugin.css';

当然我编译的js和css文件不包含这些样式。他们在路上迷路了。 style.scss 中的所有 css 都在那里，main.js 中的所有 js 和其中包含的 jsx 都在那里，但这些样式不在那里。

我做错了什么？

Answer 1

这只是因为您正在使用 extract-text-webpack-plugin 模块。如果你想将 sass 保留在包中，请将你的 webpack 配置修改为:

const path = require('path');
const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


config = {
    entry: {
        "main": './main.js',
        "main.min": './main.js'
    },
    watch: true,
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/i,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['es2015', 'react'],
                    minified: true
                }
            },
            {
                test: /\.scss|css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ],
    },
    plugins: [
        readSass,
        new UglifyJsPlugin({
            include: /\.min\.js$/
        })
    ],
}

module.exports = config;

并通过以下命令安装sass-loader和style-loader:npm install -D sass-loader style-loader

编辑:我忘了告诉你，你必须在 js 入口点之前包含你的 css 或 sass

require('path/to/your/main.scss')

ReactDOM.render(<App />, document.getElementById('root'))

这样它就捆绑在一起了，并且您不必再将 css 包含在 webpack 配置入口点中。