Как настроить webpack для scss и начальной загрузки с проектом ASP.NET? - PullRequest
Новая
       7

Как настроить webpack для scss и начальной загрузки с проектом ASP.NET?

0 голосов
/ 09 октября 2019

У меня есть готовый веб-пакет, и я не могу понять, как получить файл .scss, скомпилированный для использования с пользовательскими стилями, такими как цвета и т. Д. Bootstrap в противном случае загружается нормально.

Вот мойwebpack.config.js 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env = {}, argv = {}) => {

    const isProd = argv.mode === 'production';

    const config = {
        mode: argv.mode || 'development', // we default to development when no 'mode' arg is passed

        optimization: {
            minimize: true
        },
        entry: {
            main: './src/main.js'
        },
        output: {
            filename: isProd ? 'bundle-[chunkHash].js' : '[name].js',
            path: path.resolve(__dirname, '../wwwroot/dist'),
            publicPath: "/dist/"
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: isProd ? 'style-[contenthash].css' : 'style.css'
            }),
            new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
                threshold: 10240,
                minRatio: 0.8
            }),
            new HtmlWebpackPlugin({
                template: '_LayoutTemplate.cshtml',
                filename: '../../Views/Shared/_Layout.cshtml', //the output root here is /wwwroot/dist so we ../../      
                inject: false
            })
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        'style-loader',
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'assets/'
                    }
                }
            ]
        }
    };
    return config;
};

У меня установлен node-sass, который, как мне кажется, компилируется? Просто не знаю, как это сделать.

Спасибо,

1 Ответ

1 голос
/ 09 октября 2019

Вам необходимо импортировать ваш CSS в вашу точку входа. Поэтому в main.js импортируйте ваш файл scss следующим образом ... 

import './path-to/file.scss
...