Web-загрузчик sass-loader не генерирует файл css

Я не могу понять, как отрисовать файл css с помощью sass-loader webpack.

Вот что выглядит мой webpackconfig.js:

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },


  output: {
    filename: "app.js",
    path: __dirname + "/dist"
  },


  module: {
    loaders: [
      //JAVASCRIPT
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },

      //Index HMTML
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      //Hotloader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

      // SASS
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }

    ],
  }

}

Как вы можете видеть, я использую загрузчик модуля sass-loader, указанный в документации.

  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  }

Мой корень выглядит таким:

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

Я могу заставить все, что работает, например, html и jsx загрузчики. Я просто набираю webpack в командной строке, и все происходит.

Я делаю что-то неправильно с загрузчиком sass. Что это? Пожалуйста, помогите.

Ответы

Ответ 1

Используется стильный загрузчик, который по умолчанию встраивает ваш CSS в Javascript и вводит его во время выполнения.

Если вам нужны реальные CSS файлы вместо CSS, встроенные в ваш Javascript, вы должны использовать ExtractTextPlugin.

Базовая конфигурация:

  • Добавьте var ExtractTextPlugin = require('extract-text-webpack-plugin'); в начало конфигурационного файла Webpack.

  • Добавьте в конфигурацию Webpack следующее:

    plugins: [
    new ExtractTextPlugin('[name].css'),
]

  • Измените конфигурацию загрузчика SASS следующим образом:

    {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
        'style-loader', // backup loader when not building .css file
        'css-loader!sass-loader' // loaders to preprocess CSS
    )
}

Что это такое - извлечь все CSS, которые он может найти в вашем пакете, в отдельный файл. Имя будет основано на имени вашей точки входа, которое в вашем случае приведет к javascript.css (из входной части вашей конфигурации).

ExtractTextPlugin.extract -loader используется плагином, чтобы найти CSS в вашем коде и поместить его в отдельные файлы. Первый параметр, который вы ему даете, - это загрузчик, на который он должен вернуться, если он встречает файлы в асинхронном модуле, например. Обычно это почти всегда style-loader. Второй параметр сообщает плагину, какие загрузчики использовать для обработки CSS, в этом случае css-loader и sass-loader, но такие вещи, как postcss-loader, также часто используются.

Дополнительную информацию о создании CSS с помощью Webpack можно найти здесь: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

Ответ 2

Используя TypeScript и сталкиваясь с подобной проблемой, я обнаружил, что импорт файла "scss" должен быть в индексном файле, с которого начинается Webpack.

Импортируйте в index.ts, а не во внутренний модуль.