N
N
nuclearjack2020-01-15 11:16:24
css
nuclearjack, 2020-01-15 11:16:24

How to include import when building node-sass-glob-importer styles?

Hello. It is necessary to collect all the styles in the directory, for this I use the node-sass-glob-importer. On windows everything works fine, but on debian only .scss/.sass styles are collected, css styles get into the bundle as imports.
Maybe someone has come across something similar. Thanks in advance.
6iGx6csCI54.jpg

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const globImporter = require('node-sass-glob-importer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');


module.exports = {
    entry: './resources/js/main.js',
    output: {
        path: path.resolve(__dirname, 'public/bundle'),
        filename: './js/main.js',
        // chunkFilename: '[id]-[chunkhash].js',
    },
    resolve: {
        extensions: [
            '.mjs',
            '.js',
            '.jsx',
            '.vue',
            '.json',
            '.wasm'
        ],
    },
    stats: {
        children: false,
        errors: true
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            import: true
                        }
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                webpackImporter: false,
                                importer: globImporter(),
                                import: false
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ],
            }
        ]
    },
    mode: 'development',
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: './css/main.css'
        }),
        new WebpackAssetsManifest({
            output: '../mix-manifest.json',
            publicPath: './bundle/',
        }),
        new CleanWebpackPlugin({
        }),
    ]
};

@import './variables';
@import './css/**/*.css';
@import './rf/*.scss';

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
nuclearjack, 2020-01-15
@nuclearjack

Decided to use import-glob-loader instead of node-sass-glob-importer. Everything worked.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question