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 레이블을 추가할 수 있습니까?

예

좋은 이대

물론 플러그인이란 무엇을 의미합니까? 다음 공식 플러그인이 마음에 드시나요?

패키지 디렉토리에 공식 플러그인이 있습니다. 거기에서 몇 가지 예를 볼 수 있습니다.

내 버전의 sc 통합도 공유하겠습니다. 누군가에게 유용할 수 있습니다.

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

내 버전의 sc 통합도 공유하겠습니다. 누군가에게 유용할 수 있습니다.

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

안녕하세요, 이 razzle 구성을 사용하려면 어떤 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 를 설치해야 합니다.

나는 지금 해결되었다고 생각하는 scs에 대한 몇 가지 오래된 문제를 훑어보고 있습니다. 현재로서는 패키지가 더 적은 것 같지는 않지만 지금은 scss 플러그인이 있습니다.

scss 패키지가 이제 여기에 게시되었으며 저에게 잘 맞습니다.
https://www.npmjs.com/package/razzle-plugin-scss

여기에서 예를 참조하십시오.
https://github.com/jaredpalmer/razzle/tree/master/examples/with-scss

둘 다 다음 분기에 추가되어 닫힙니다.