Webpack 3 - Написание стилей в файл CSS

Question

Я прочитал множество учебных пособий и посмотрел на больше репозиториев Github, чем мне хотелось бы запомнить, но я действительно изо всех сил пытаюсь настроить Webpack 3, чтобы сделать следующее:

• Скомпилировать SASS в CSS
• Создайте файл CSS в каталоге dist
• Запустите Autoprefixer на CSS

Ниже мой webpack.config.js:

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    context: path.resolve(__dirname, 'src'),
        entry: {
        app: './js/index.js',
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist',                          // New
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src'),    // New
    },

    module: {
        rules: [
            {
                test: /\.js$/i,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: { presets: ['env'] },
                }],
            },
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },
            {
              test: /\.(sass|scss)$/i,
              use: [
                'style-loader',
                'css-loader',
                'sass-loader',
              ]
            }
        ]
    },
    plugins: [
      new ExtractTextPlugin({
        filename: 'css/styles.css',
        allChunks: true,
      }),
    ]
};

В данный момент:

• сервер разработки веб-пакетов запущен.
• Стили копируются из src/scss/styles.scss во встроенный блок стилей в файле HTML, который подается из src/index.html.

Я хотел бы, чтобы каталог dist создавался с файлом styles.css, внутри которого я мог бы затем ссылаться из моего HTML.

Спасибо

Answer 1

Скомпилировать SASS в CSS

В настоящее время вы правильно компилируете SASS в CSS с помощью

{
  test: /\.(sass|scss)$/i,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

Создайте файл CSS в каталоге dist

CSS не извлекается во внешний файл из-за style-loader в ранее описанной цепочке погрузчиков. style-loaderусваивает весь CSS, переданный ему в<style>,

Для создания внешнего файла вы можете использовать, который вы есть,extract-text-webpack-plugin, Единственная проблема заключается в том, что он не привязан к/\.(sass|scss)$/тестовое задание.

Вам нужно только создать правила для ваших исходных файлов. Поскольку вы пишете SASS/SCSS, вам не нужно/\.css$/тестовое задание. Ваш CSS должен быть извлечен, если вы измените цепочку загрузчика на

{
  test: /\.(sass|scss)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'sass-loader'
    ]
  })
}

Запустите Autoprefixer на CSS

Теперь, чтобы автоматически префиксировать ваш CSS, вам нужно добавить еще один загрузчик в цепочку,postcss-loader, Установите его вместе сautoprefixer,

npm i -D postcss-loader autoprefixer

Добавьте запрос дляautoprefixerв верхней части вашегоwebpack.config.js,

const autoprefixer = require('autoprefixer');

Наконец, добавьтеpostcss-loaderк цепи погрузчика, между css-loader а такжеsass-loader,

use: [
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer()]
    }
  },
  'sass-loader'
]