Используйте разные загрузчики для файлов .scss и .less - PullRequest
Новая
       35

Используйте разные загрузчики для файлов .scss и .less

0 голосов
/ 30 мая 2018

Я использую модули Webpack 3 и CSS.У меня есть разные загрузчики для файлов ".local.css" и "local.scss" (локальные файлы) и другой набор загрузчиков для моих глобальных файлов ".css или .less".

Теперь у меня есть одинбольше типов файлов, глобальный файл ".scss".Я не хочу создавать другой набор загрузчиков только для файла .scss, поскольку загрузчики такие же, как и для глобальных файлов .css и .less.

Есть только одно отличие: если файл ".less", я буду использовать less loader, а если его ".scss", тогда я буду использовать sass loader. 

{
        test: /\.local\.(css|scss)$/,
        use: ExtractLocal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]___[name]__[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: [ path.resolve(__dirname, './src/client/styling/styles/variables.scss'), ],
              },
            },
          ],
        }),
      },
      {
        test: /^((?!\.local).)+\.(css|less)$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'less-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        }),
      },

Какя делаю это?Могу ли я как-то проверить тип файла и использовать соответствующий загрузчик, например? 

{
        test: /^((?!\.local).)+\.(css|less|scss)$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },

            if(test === '.less') {

              loader: 'less-loader',
              options: {
                sourceMap: true,
              },
             } else {
               loader: 'sass-loader',
               options: {
                sourceMap: true,
              },
             }

          ],
        }),
      },

Я знаю, что мой пример не имеет смысла, просто хотел продемонстрировать, к чему я стремлюсь.

...