Rails 6.1 sass-loader без конвейера ресурсов (webpacker)

Автоматическое включение всех вложенных файлов SCSS с помощью Rails 6.1 и sass-loader

В Rails 6.0.3.4 появилась возможность использовать Sass-loader для глобализации всех файлов SCSS без включения каждого из них вручную.

Проблема - синтаксис v7

Это не удается в Rails 6.1 со следующей ошибкой webpacker (с конфигурацией webpacker, см. Ниже, .options = { importer: globImporter() }; // syntax for sass-loader v7)

ERROR in ./app/javascript/packs/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/packs/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'importer'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/workspace/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/workspace/node_modules/sass-loader/dist/index.js:36:28)

Проблема - синтаксис v8

Если я изменю конфигурацию на синтаксис sass-loader v8 (.sassOptions = { importer: globImporter() };), я получу другую ошибку:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[2].use[3] has an unknown property 'sassOptions'. These properties are valid:
   object { ident?, loader?, options?, query? }

Вопрос

Как настроить его с помощью Rails 6.1 и sass-loader v8?

Исходная рабочая конфигурация до 6.1:

yarn add node-sass-glob-importer, Rails 6.1 использует [email protected]
Настройте конфигурацию веб-пакета, чтобы передать параметры загрузчика:

# config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const globImporter = require('node-sass-glob-importer');

environment
    .loaders
    .get('sass')
    .use
    .find(item => item.loader === 'sass-loader')
    .options = { importer: globImporter() }; // syntax for sass-loader v7
    // .sassOptions = { importer: globImporter() }; // for v8

module.exports = environment

Затем в

// app/javascript/packs/application.scss
import './application.scss';

и наконец в

// app/javascript/packs/application.scss
@import '../stylesheets/**/*.scss';

Все вложенные таблицы стилей SCSS в app/javascript/packs будут автоматически скопированы.

summer.breeze 11.12.2020 источник

Ответы (1)

arrow_upward
1
arrow_downward

Нашел решение. Для Rails 6.1 вам понадобится следующая environment.js конфигурация webpacker:

const { environment } = require('@rails/webpacker')

const globImporter = require('node-sass-glob-importer');

environment
    .loaders
    .get('sass')
    .use
    .find(item => item.loader === 'sass-loader')
    .options = { sassOptions: { importer: globImporter() } }; // <-- this!

module.exports = environment

summer.breeze 11.12.2020