Webpack 从 .jsx 文件中删除 css？

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 的所有 js 和其中包含的 jsx 都在那里，但是这些样式没有。

我做错了什么？

Answer 1

你能看到当你也包含 style-loader 时会发生什么吗，就像这样：

$ npm i -D style-loader

//... webpack.config.js
{
  test: /\.scss$/,
  use: [{
    loader: "style-loader"
  }, {
    loader: "css-loader"
  }, {
    loader: "sass-loader"
  }],
  exclude: /node_modules/
},

编辑：如果您需要从那里加载文件，请删除 exclude: /node_modules/。

然后确保将其导入到您的 js 入口点：import "../css/main.scss";

Answer 2

那是因为您正在使用 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 3

sass 要求尚未声明？可以在测试中使用 ./sass/**/*.css/\ 来调用任何 css 样式翻译自 sass.

Webpack 从 .jsx 文件中删除 css？

Webpack removes css from .jsx files?

javascript

webpack

css-modules