Question

我的webpack文件看起来像这样（注意 - 现在 - 我需要创建资产的缩小和非缩小版本 - 所以这不是一个错误）：

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模块，如：

import 'react-plugin/react-plugin.css';

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

我做错了什么？

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配置入口点了。

Answer 2

sass要求还没有声明？可以在你的测试中使用./sass / ** / *。css / \从sass调用任何css样式的翻译。

Webpack从.jsx文件中删除css？

2 个答案: