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 bot 会将其标记为过时，因为它有一段时间没有最近的活动。 如果几天内没有进一步的活动，它将被关闭。 不要把这当回事——说真的——这是一个完全自动化的动作。 如果这是一个错误，请发表评论，DM 我，发送载体 pidgeon 或烟雾信号。

@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 才能使用您的 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配置可能看起来像这样。 我没有使用过少，只有 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

两者都添加到下一个分支，关闭