Razzle: Добавить scss и меньше плагинов

какие-нибудь новости об этом уже интегрированы?

Я сделал это в razzle.config.js

"use strict";

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  modify: (config, { target, dev }, webpack) => {

    const appConfig = Object.assign({}, config);

    // Setup SCSS
    if (target === "web") {

      appConfig.module.rules.push(
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            dev ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ]
        }
      );

    }
    else {
      // On the server, we can just simply use css-loader to
      // deal with scss imports
      appConfig.module.rules.push({
        test: /\.(sa|sc|c)ss$/,
        use: "css-loader"
      });
    }

    return appConfig;
  }
};

Зависимости разработчиков:

"devDependencies": {
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "razzle": "^2.4.0",
    "sass-loader": "^7.1.0"
  }

Привет! Итак, вот сделка между открытым исходным кодом и моей повседневной работой и жизнью, а также тем, что нет, мне есть чем управлять, поэтому я использую бота GitHub для автоматизации некоторых вещей здесь и там. Этот конкретный бот GitHub будет отмечать его как устаревший, потому что в последнее время в нем не было активности. Он будет закрыт, если в течение нескольких дней не будет никакой активности. Не принимайте это на свой счет - серьезно - это полностью автоматизированное действие. Если это ошибка, просто оставьте комментарий, отправьте мне DM, отправьте курьера или дымовой сигнал.

@jaredpalmer Не могли бы вы добавить ярлык Хактоберфеста?

Ага

Добрый Ида

Конечно, что ты имеешь в виду под плагином? Как следующие официальные плагины?

В каталоге пакетов есть официальные плагины. Вы можете увидеть там несколько примеров.

Поделюсь и своей версией интеграции со scss, может, кому-то пригодится.

Я подумал, что мне не нужно переопределять правила css для scss, поэтому я просто делаю копию оригинала и добавляю загрузчик scss.

'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const paths = require('razzle/config/paths');

const cssLoaderFinder = makeLoaderFinder('css-loader');
module.exports = {
    modify(baseConfig, {dev}, webpack) {
        /* make a copy of config */
        const config = Object.assign({}, baseConfig);

        const scssLoader = {
            loader: require.resolve('sass-loader'),
            options: {
                sourceMap: dev,
            },
        };

        // Copy base css rules and add scss support
        config.module.rules.filter(cssLoaderFinder).forEach(rule => {
            const isCssModuleRule = !rule.test.test('module.css');
            const scssExclude = [paths.appBuild];
            let scssTest = /\.s[ac]ss$/;
            if (isCssModuleRule) {
                scssTest = /\.module\.s[ac]ss$/;
            } else {
                scssExclude.push(/\.module\.s[ac]ss$/);
            }

            // Use default configs
            config.module.rules.push({
                test: scssTest,
                exclude: scssExclude,
                use: [
                    ...rule.use,
                    scssLoader,
                ]
            });
        });

        // adding ./src to module resolver so I can import modules with absolute paths
        config.resolve.modules.push('./src');

        return config;
    },
};

Поделюсь и своей версией интеграции со scss, может, кому-то пригодится.

Я подумал, что мне не нужно переопределять правила css для scss, поэтому я просто делаю копию оригинала и добавляю загрузчик scss.

'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const paths = require('razzle/config/paths');

const cssLoaderFinder = makeLoaderFinder('css-loader');
module.exports = {
    modify(baseConfig, {dev}, webpack) {
        /* make a copy of config */
        const config = Object.assign({}, baseConfig);

        const scssLoader = {
            loader: require.resolve('sass-loader'),
            options: {
                sourceMap: dev,
            },
        };

        // Copy base css rules and add scss support
        config.module.rules.filter(cssLoaderFinder).forEach(rule => {
            const isCssModuleRule = !rule.test.test('module.css');
            const scssExclude = [paths.appBuild];
            let scssTest = /\.s[ac]ss$/;
            if (isCssModuleRule) {
                scssTest = /\.module\.s[ac]ss$/;
            } else {
                scssExclude.push(/\.module\.s[ac]ss$/);
            }

            // Use default configs
            config.module.rules.push({
                test: scssTest,
                exclude: scssExclude,
                use: [
                    ...rule.use,
                    scssLoader,
                ]
            });
        });

        // adding ./src to module resolver so I can import modules with absolute paths
        config.resolve.modules.push('./src');

        return config;
    },
};

Привет, пожалуйста, какие devDependencies мне понадобятся, чтобы использовать эту конфигурацию вашего razzle ?. ты не упомянул их

@Toyurc Я использовал [email protected] и [email protected] .

Привет, есть ли какое-нибудь быстрое решение, чтобы меньше читать?
я получил

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> <strong i="7">@import</strong>

независимо от того, что я устанавливаю и т. д.

Привет, есть ли какое-нибудь быстрое решение, чтобы меньше читать?
я получил

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> <strong i="8">@import</strong>

независимо от того, что я устанавливаю и т. д.

Для .less config может выглядеть так. Я не использовал меньше, только дерзость, но общие правила все равно должны применяться.

'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const paths = require('razzle/config/paths');

const cssLoaderFinder = makeLoaderFinder('css-loader');
module.exports = {
    modify(baseConfig, {dev}, webpack) {
        /* make a copy of config */
        const config = Object.assign({}, baseConfig);

        const lessLoader = {
            loader: require.resolve('less-loader'),
            options: {
                sourceMap: dev,
            },
        };

        // Copy base css rules and add less support
        config.module.rules.filter(cssLoaderFinder).forEach(rule => {
            const isCssModuleRule = !rule.test.test('module.css');
            const lessExclude = [paths.appBuild];
            let lessTest = /\.less$/;
            if (isCssModuleRule) {
                lessTest = /\.module\.less$/;
            } else {
                lessExclude.push(/\.module\.less$/);
            }

            // Use default configs
            config.module.rules.push({
                test: lessTest,
                exclude: lessExclude,
                use: [
                    ...rule.use,
                    lessLoader,
                ]
            });
        });

        // adding ./src to module resolver so I can import modules with absolute paths
        config.resolve.modules.push('./src');

        return config;
    },
};

Необходимо установить less-loader и less .

Я просто просматриваю некоторые старые проблемы, связанные с scss, которые, как мне кажется, теперь решены. Не похоже, что сейчас меньше пакетов, но теперь есть плагин scss, fyi.

Пакет scss теперь опубликован здесь и отлично мне подходит.
https://www.npmjs.com/package/razzle-plugin-scss

См. Пример здесь:
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

Оба добавлены в следующую ветку, закрывая