Razzle: Tambahkan scss dan lebih sedikit plugin

ada berita tentang ini yang terintegrasi belum?

Saya melakukan perluasan ini di 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;
  }
};

Ketergantungan pengembang:

"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"
  }

Halo! Jadi inilah kesepakatannya, antara open source dan pekerjaan dan kehidupan sehari-hari saya dan apa yang tidak, saya memiliki banyak hal untuk dikelola, jadi saya menggunakan bot GitHub untuk mengotomatiskan beberapa hal di sana-sini. Bot GitHub khusus ini akan menandai ini sebagai basi karena tidak memiliki aktivitas baru-baru ini untuk sementara waktu. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi dalam beberapa hari. Jangan menganggap ini pribadi--serius--ini adalah tindakan yang sepenuhnya otomatis. Jika ini kesalahan, cukup beri komentar, DM saya, kirim pidgeon pembawa, atau sinyal asap.

@jaredpalmer Bisakah Anda menambahkan label Hacktoberfest?

ya

Ide bagus

Tentu saja, apa yang Anda maksud dengan plugin? Suka plugin resmi berikutnya?

Ada plugin resmi di direktori paket. Anda dapat melihat beberapa contoh di sana.

Saya akan membagikan versi integrasi scss saya juga, mungkin ini berguna untuk seseorang.

Saya pikir saya tidak perlu mendefinisikan ulang aturan css untuk scss jadi saya hanya membuat salinan yang asli dan menambahkan scss loader.

'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;
    },
};

Saya akan membagikan versi integrasi scss saya juga, mungkin ini berguna untuk seseorang.

Saya pikir saya tidak perlu mendefinisikan ulang aturan css untuk scss jadi saya hanya membuat salinan yang asli dan menambahkan scss loader.

'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;
    },
};

Hai, tolong devDependencies apa yang saya perlukan untuk menggunakan ini konfigurasi razzle Anda?. Anda gagal menyebutkannya

@Toyurc saya menggunakan [email protected] dan [email protected] .

Hai, apakah ada perbaikan cepat untuk membaca lebih sedikit?
saya mendapat

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

tidak peduli apa yang saya instal dll

Hai, apakah ada perbaikan cepat untuk membaca lebih sedikit?
saya mendapat

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

tidak peduli apa yang saya instal dll

Untuk konfigurasi .less mungkin terlihat seperti ini. Saya belum menggunakan lebih sedikit, hanya sass tetapi aturan umum harus tetap berlaku.

'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 dan less perlu diinstal.

Saya hanya membaca sekilas beberapa masalah lama tentang scss yang saya yakini telah diselesaikan sekarang. Sepertinya tidak ada paket yang lebih sedikit saat ini, tetapi sekarang ada plugin scss fyi.

Paket scss sekarang diterbitkan di sini dan berfungsi dengan baik untuk saya.
https://www.npmjs.com/package/razzle-plugin-scss

Lihat contoh di sini:
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

Keduanya ditambahkan di cabang berikutnya, tutup