Объедините CSS и Less с веб-пакетом - PullRequest
Новая
       12

Объедините CSS и Less с веб-пакетом

1 голос
/ 05 марта 2019

как я могу объединить CSS и Less через веб-пакет и какие дополнительные модули узлов мне нужны?

Нужны ли мне два разных входных файла, один для LESS и один для CSS?Если это так, каков наилучший способ сделать это?

Проблемы возникают при импорте файлов .css в файл .less.

CSS 

            test: /\.css$/,
            exclude: [/node_modules/, /public/],
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {

                    }
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                        plugins: [
                            autoprefixer({
                                browsers: ['>2%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
                            }),
                            postcssPresetEnv(),
                            PostcssClean({
                                sourceMap: true,
                                level: 1
                            })
                        ]
                    }
                }
            ]

МЕНЬШЕ 

            test: /\.less$/,
            exclude: [/node_modules/, /public/],
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                        plugins: [
                            autoprefixer({
                                browsers: ['>2%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
                            }),
                            postcssPresetEnv(),
                            PostcssClean({
                                sourceMap: true,
                                level: 1
                            })
                        ]
                    }
                },
                {
                    loader: 'less-loader',
                    options: {
                        sourceMap: true
                    }
                }
            ]

/// РЕДАКТИРОВАНИЕ Решение состоит в том, чтобы определить две разные точки входа и затем обрабатывать CSS и Less отдельно друг от друга.

С загрузчиком SASS решение @ Pete (смотрите в комментариях) кажется лучшим.Просто позвольте CSS и SASS обрабатываться одним и тем же загрузчиком.

...