使用Webpack 4将某些SCSS文件导出到CSS

时间:2019-03-20 15:49:55

标签: reactjs sass webpack-4

所以我有一个React应用程序,我在这里使用sass-loader导入css-modules。但是我也想包括一些不需要作为对象导入到每个组件中的css,并将其直接导入到我的index.ejs模板文件中。但是我似乎无法让MiniCssExtractPlugin加载程序正常工作。我没有任何构建错误,但也没有创建我需要的css文件。

我的webpack.config.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyEsPlugin = require('uglify-es-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const OUTPUT_DIR = path.resolve(__dirname, 'dist');
const SOURCE_DIR = path.resolve(__dirname, 'src');

const TARGET = process.env.npm_lifecycle_event;

console.log(`Environment event is... ${TARGET}`);       // eslint-disable-line no-console
console.log(`Current directory is... ${__dirname}`);    // eslint-disable-line no-console
console.log(`Output directory is... ${OUTPUT_DIR}`);    // eslint-disable-line no-console
console.log(`Source directory is... ${SOURCE_DIR}`);    // eslint-disable-line no-console

const commonConfig = {
    entry: `${SOURCE_DIR}/index.jsx`,
    output: {
        path: OUTPUT_DIR,
        filename: 'bundle.js',
        publicPath: '/',
    },
    resolve: {
        extensions: ['.jsx', '.js'],
        alias: {
            components: path.resolve(__dirname, 'src/components'),
            constants: path.resolve(__dirname, 'src/constants'),
            data: path.resolve(__dirname, 'src/data'),
            images: path.resolve(__dirname, 'src/images'),
            services: path.resolve(__dirname, 'src/services'),
            store: path.resolve(__dirname, 'src/store'),
            styles: path.resolve(__dirname, 'src/styles'),
        },
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                include: SOURCE_DIR,
                loader: 'babel-loader',
            },
            {
                test: /\.(png|jpg|jpeg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 25000,
                    },
                },
            },
            {
                test: /\.svg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[hash].[ext]',
                        publicPath: '/',
                        limit: 8192,
                    },
                },
            },
            {
                test: /\.(s*)css$/,
                use: [
                    'style-loader?sourceMap',
                    'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                    'sass-loader',
                    'postcss-loader',
                ],
                exclude: [
                    path.resolve(__dirname, 'styles/bootstrap/'),
                ],
            },
            {
                test: /`.(s*)css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'style-loader?sourceMap',
                    'css-loader',
                    'sass-loader',
                ],
                include: [
                    path.resolve(__dirname, 'styles/bootstrap/bootstrap.scss'),
                ],
            },
        ],
    },
    plugins: [
        new CopyWebpackPlugin([
            {
                from: 'src/robots.txt',
                to: 'robots.txt',
            },
        ]),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                },
            },
        },
    },
};

if (TARGET === 'local') {
    module.exports = merge.smart(commonConfig, {
        devServer: {
            historyApiFallback: true,
            port: 3000,
        },
        mode: 'development',
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    ...
                },
            }),
            new HtmlWebpackPlugin({
                template: `${SOURCE_DIR}/templates/index.ejs`,
                templateParameters: {
                    ...
                },
            }),
            new HtmlWebpackPlugin({
                template: `${SOURCE_DIR}/templates/index.ejs`,
                templateParameters: {
                    ...
                },
            }),
        ],
    });
}

0 个答案:

没有答案