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 Hacktoberfestラベルを追加できますか？

うん

いいイデ

もちろん、プラグインとはどういう意味ですか？ 次の公式プラグインのように？

パッケージディレクトリには公式のプラグインがあります。 そこにいくつかの例を見ることができます。

私のバージョンのscss統合も共有します。誰かにとって役立つかもしれません。

scssのcssルールを再定義する必要はないと思ったので、元のコピーを作成して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統合も共有します。誰かにとって役立つかもしれません。

scssのcssルールを再定義する必要はないと思ったので、元のコピーを作成して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を教えてください。 あなたはそれらに言及しなかった

@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は次のようになります。 私はあまり使用していません。sassだけですが、一般的なルールが適用されます。

'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

両方とも次のブランチに追加され、終了します