Карта исходного кода в исходный файл SCSS - PullRequest
Новая
       6

Карта исходного кода в исходный файл SCSS

0 голосов
/ 15 мая 2018

Я using Webpack 4 с плагинами MiniCssExtractPlugin и OptimizeCSSAssetsPlugin для извлечения SCSS файлов и минимизации файла main.css в производстве.В моем файле конфигурации включено сопоставление исходных кодов, например: 

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    devtool: "source-map",
    entry: {
        style: './src/scss/main.scss'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                 test: /\.css$/,
                 use: [
                     MiniCssExtractPlugin.loader,
                     { loader: 'css-loader', options: { url: false, sourceMap: true } }
                 ]
             },      
             {
                 test: /\.scss$/,
                 use: [
                     'style-loader',
                     MiniCssExtractPlugin.loader,
                     { 
                         loader: 'css-loader', 
                         options: { 
                             url: false, sourceMap: true 
                         } 
                     },
                     { 
                         loader: 'sass-loader', 
                         options: { 
                             sourceMap: true 
                         } 
                     }
                 ]
             }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            sourceMap: true,
            filename: "main.css"
        }),
        new UglifyJsPlugin({
            sourceMap: true,
            test: /\.js($|\?)/i,
        }),
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                map: {
                    inline: true
                }
            }
        }) ,
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })    
    ]
}

В консоли он дает строку, из которой происходят правила CSS, но в комплекте main.css, а не invididual scss.файлы, например _layout.scss, _buttons.scss.

Вопрос

Какую конфигурацию добавить, чтобы показать, откуда исходит правило CSSа точнее где он находится в комплекте main.css файла?

1 Ответ

0 голосов
/ 15 мая 2018

Как я вижу на вашей sass-loader конфигурации, вы уже получаете исходные карты для ваших scss файлов (чтобы убедиться, что вам нужен файл с таким же именем, как у вас css, но с .map на его имя), так что единственное, что вам нужно, это настроить браузер для загрузки и использования исходных карт. В этом примере используется Google Chrome:

  1. Инструменты открытого разработчика
  2. Щелкните значок шестеренки или три точки, чтобы открыть настройки (в верхнем правом углу)
  3. В разделе «Общие» (или «Настройки») найдите раздел «Источники». В этом разделе выберите «Включить исходные карты CSS».
  4. Убедитесь, что сопровождающий «Автоперезагрузка сгенерированного CSS» также включена (если доступно). Этот последний шаг помогает перезагрузить CSS при его изменении. Думайте об этом как о функции перезагрузки в реальном времени только для CSS.
  5. Перейдите на локальный сервер, осмотрите любой элемент на своей странице.
  6. В инструментах разработчика выберите вкладку Источники.
  7. В дереве файлов слева щелкните правой кнопкой мыши свою таблицу стилей и выберите «Сопоставить с ресурсом файловой системы…». Это вызовет диалог поиска файлов. Выберите соответствующий файл (вашу таблицу стилей). В некоторых более новых версиях Chrome файл должен загружаться автоматически с использованием /*# sourceMappingURL=style.css.map */ reference
  8. Перезапустите инструменты разработчика.

Это должно сработать. Дай мне знать. В противном случае я точно настрою краткое руководство.

...