смотреть и компилировать sass без импорта js с помощью веб-пакета

Question

Интересно, есть ли способ просмотреть несколько файлов scss и скомпилировать их в один файл css без необходимости импорта файла scss внутри файла js?

Answer 1

Я знаю, что уже поздно, но есть способ использовать SCSS и автоматически преобразовать его в файл CSS (который программа читает)!Он называется Chokidar. Он также отслеживает любые изменения в SCSS и автоматически обновляет вашу страницу и обновляет ваши изменения!

https://dev.to/koheishingaihq/react-with-sass-11e

Однако, когда вы делаете этот метод ^, убедитесь, что webpack нев вашем package.json конфликтует.

Answer 2

Вы можете настроить точку входа веб-пакета как файл SCSS, и тогда вам не нужно будет выполнять импорт в JavaScript.

Очень простая конфигурация веб-пакета, такая как ниже, должна работать:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './scss/app.scss',
  module: {
    rules: [
      // Extracts the compiled CSS from the SASS files defined in the entry
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          [
            'css-loader',
            'sass-loader'
          ]
        ),
      }
    ],
  },
  plugins: [
    // Where the compiled SASS is saved to
    new ExtractTextPlugin({
      filename: 'app.css',
      allChunks: true,
    })
  ],
  devServer: {
    host: '0.0.0.0',
  }
};

Эта установка будет следить за изменениями в файлах SCSS, и вы можете перезагрузить страницу вручную, чтобы увидеть изменения.

Я собрал небольшой пример проекта для демонстрации: https://github.com/madebydavid/watch-and-compile-scss