Создать исходную карту из скомпилированного SASS в webpack4 - PullRequest
Новая
       25

Создать исходную карту из скомпилированного SASS в webpack4

0 голосов
/ 02 апреля 2020

Мой проект не является JS веб-приложением. Это традиционная CMS с шаблонами PHP, которая вызывает необходимые файлы JS и CSS. Я использую webpack4 для следующих целей:

  1. Для JS: объединить, минимизировать, заполнить и создать js исходную карту - которая работает хорошо, здесь нет проблем.
  2. Копировать оценки (шрифты и изображения) из папки в sr c. другому в расст. --working too.
  3. Для моих файлов S CSS: скомпилируйте Sass из заданного каталога, добавьте префиксы и выведите один файл css в указанную папку c, включая CSS ИСТОЧНИК . Все работает НО я не могу сгенерировать CSS исходную карту . Я могу сделать все это с Grunt, но я надеялся использовать только один инструмент - webbpack!

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

Я уже пытался добавить options:{ sourceMap:true,} к этим загрузчикам: sass-loader, postcss-loader, css-loader, но затем я получаю длинный список ошибок, которые, похоже, происходят от extrac-loader.

Я ценю любые советы или помощь по этому вопросу. Я уже потратил 2 дня на устранение неисправностей без какого-либо прогресса! 

    const path = require('path');
    const OptimizeCSSAssetsPlugin = require(
      "optimize-css-assets-webpack-plugin"
    ); // Recommended for Minifying outputted css
    const cssnano = require("cssnano"); // Used by OptimizeCSSAssetsPlugin 
    var webpack = require('webpack'); // used by SourceMapDevToolPlugin --which was recommended over devtool.

    module.exports = {
        cache: false,
        entry: {
            'main': [ // forces webpack to process specified files
                     '../src/js/main.js',
                     '../src/sass/screen.scss',
                     ],
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, '../dist/js'), // watchout: all output paths in 'rules' will be relative to this path
        },
        mode: 'development',
        devtool: false, // passes sourcemap control to SourceMapDevToolPlugin
        module:{
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '../css/[name].css', // Destination of final processed css file
                            }
                        },
                        {
                            loader: 'extract-loader', //The extract-loader evaluates the given source code on the fly and returns the result as string.
                        },
                        {
                            loader: 'css-loader?-url', //The css-loader interprets @import and url() like import/require() and will resolve them.

                        },
                        {
                            loader: 'postcss-loader', // adds prefixes
                        },
                        {
                            loader: 'sass-loader', // Loads a Sass/SCSS file and compiles it to CSS
                        },
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets:
                            [
                                '@babel/env',
                                {
                                    // "corejs": 3,
                                }
                            ]
                        }
                    }
                },

            ] // End of rules
        }, // End of module
        plugins: [
            new webpack.SourceMapDevToolPlugin(
                {
                    filename: '[name].map',
                    columns: false,
                     module: true,
                }
            ),
            new OptimizeCSSAssetsPlugin({
              cssProcessor: cssnano,
              cssProcessorOptions:  {
                      discardComments: {
                        removeAll: true,
                      },
                      // Run cssnano in safe mode to avoid
                      // potentially unsafe transformations.
                      safe: true,
                    },
              canPrint: false,
            }),
          ],
    } // End of module.exports

1 Ответ

0 голосов
/ 03 апреля 2020

Хорошо, мой подход был неверным. Изменено несколько вещей, и теперь у меня есть исходные карты для файлов js и css.

Я вставляю свой файл webpack.config на тот случай, если кто-то посчитает его полезным (возможно, это очевидно для большинства, но я Я новичок в Webpack, надеюсь, это поможет еще одному новичку ie, как я).

Изменения, которые я сделал: оказалось, что экстрактор-загрузчик и файл-загрузчик не были нужны. Вместо этого я использовал mini- css -extract-plugin ... который учитывает исходные карты.

Существует конфликт с optimize- css -assets-webpack-plugin (если вы используете его для минимизации ), поэтому проверьте конфигурацию части плагина, чтобы убедиться, что ваши карты сайта генерируются. 

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // extracts and saves css files
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // Minifies css
const cssnano = require("cssnano"); // Used by OptimizeCSSAssetsPlugin  in the css minification
var webpack = require('webpack'); // used by SourceMapDevToolPlugin

module.exports = {
    cache: false,
    entry: {
        'main': [ // forces webpack to process specified files
                 '../src/js/main.js',
                 '../src/sass/main.scss',
                 ],
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist/js'), // watchout: all output paths in 'rules' will be relative to this path
    },
    mode: 'development',
    devtool: false, // passes sourcemap control to SourceMapDevToolPlugin
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets:
                        [
                            '@babel/env',
                            {
                                // "corejs": 3,
                            }
                        ]
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                              publicPath: '/public/path/to/',
                            },
                        },

                        {
                            loader: 'css-loader', //The css-loader interprets @import and url() like import/require() and will resolve them.
                            options: {
                                url: false,
                                sourceMap: true,
                            },
                        },

                        {
                            loader: 'postcss-loader',  // adds prefixes
                            options: {
                                sourceMap: true,
                            },
                        },

                        {
                            loader: 'sass-loader', // Loads a Sass/SCSS file and compiles it to CSS
                            options: {
                                sourceMap: true,
                                // importer: globImporter(),
                            },
                        },
                ]
            },

        ] // End of rules
    }, // End of module
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/[name].css'
        }),
new OptimizeCSSAssetsPlugin({
          cssProcessor: cssnano,
          cssProcessorOptions:  {
                  map: {
                    inline: false,  // set to false if you want CSS source maps
                    annotation: true
                  },
                  discardComments: {
                    removeAll: true,
                  },
                  // Run cssnano in safe mode to avoid
                  // potentially unsafe transformations.
                  safe: true,
                },
          canPrint: false,
        }),
        new webpack.SourceMapDevToolPlugin(
            {
                filename: '[name].map',
                columns: false,
                 module: true,
            }
        ),
      ],
} // End of module.exports
...