В веб-паке, как мне отобразить Require.js CSS! Синтаксис плагина для использования правил модуля LESS? - PullRequest
Новая
       37

В веб-паке, как мне отобразить Require.js CSS! Синтаксис плагина для использования правил модуля LESS?

0 голосов
/ 05 сентября 2018

Я пытаюсь получить webpack 4 (через проект, который в основном уже настроен с использованием Vue CLI 3 для его начальной загрузки), чтобы связать существующий проект, который в настоящее время использует комбинацию Sprockets / конвейера ресурсов Rails + Require.js .

Фон

В этом проекте много require операторов, которые выглядят так:

require('css!./styles')

Что в действительности означает в контексте текущего приложения на Rails, так это наличие файла styles.less (обратите внимание, что это .less), тогда Sprockets отвечает за то, чтобы существовал styles.css, такой, что когда Require.js собирает все, он даже не знает, что файл LESS существует.

Что я хочу

Когда веб-пакет видит require('css!./styles'), он должен искать файл с именем styles.less, но затем должен соответствовать существующим правилам веб-пакета, которые обрабатывают файлы LESS. Это больше, чем просто один плагин, поскольку соответствующий конфиг (config.module.rule('less')) находится здесь: 

{
  // ...
  module: {
    rules: [
      /* config.module.rule('less') */
      {
        test: /(\.less$)/,
        oneOf: [
          // ...
          /* config.module.rule('less').oneOf('normal') */
          {
            use: [
              /* config.module.rule('less').oneOf('normal').use('vue-style-loader') */
              {
                loader: 'vue-style-loader',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('less').oneOf('normal').use('css-loader') */
              {
                loader: 'css-loader',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('less').oneOf('normal').use('postcss-loader') */
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: false
                }
              },
              /* config.module.rule('less').oneOf('normal').use('less-loader') */
              {
                loader: 'less-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Проблемы, с которыми я сталкиваюсь:

  1. Как мне сказать, что требуется, чтобы начало с css! вызывало приведенное выше правило LESS?
  2. Как я могу переписать требуемый путь, когда требование начинается с css!? И require('css!./styles'), и require('css!./styles.css') должны отображаться на styles.less.

Потенциально связанный:

...