Webpack удаляет CSS из файлов .jsx?

Question

У меня есть файл веб-пакета, который выглядит следующим образом (обратите внимание - на данный момент - мне нужно создать как минимизированные, так и не минимизированные версии ресурсов - так что это не ошибка):

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 не содержат этих стилей. Они потерялись в пути. Все css из style.scss есть, все js из main.js и jsx, включенные в него, есть, но этих стилей нет.

Что я делаю не так?

Answer 1

это просто потому, что вы используете extract-text-webpack-plugin модуль. если вы хотите сохранить sass в своем пакете, измените конфигурацию вашего веб-пакета следующим образом:

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

РЕДАКТИРОВАТЬ: Я забыл вам сказать, Вы должны включить свой CSS или SASS до точки входа в JS, как это

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

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

так что он связан вместе, и вам больше не нужно включать ваш css в точку входа конфигурации webpack.

Answer 2

Требуется, чтобы sass еще не объявлялся - можно использовать ./sass / ** / *. Css / \ в вашем тесте для вызова любого перевода CSS-стиля из sass.

Answer 3

Можете ли вы увидеть, что происходит, когда вы включаете 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";