Webpack ExtractTextPlugin - два выходных файла

webpack

4831 просмотра

2 ответа

3451 Репутация автора

Мне нужно сгенерировать два файла CSS. Я пытался с помощью

new ExtractTextPlugin(['css/style.css','css/head.css'], { allChunks: true })

в моем конфиге и

require('../sass/head.scss');
require('../sass/style.scss');

в моем основном файле JS.

К сожалению, это выдает ошибку. Что я могу сделать?

Автор: Tomek Buszewski Источник Размещён: 18.07.2016 07:00

Ответы (2)


5 плюса

1434 Репутация автора

Для этого вам нужны две точки входа:

var styleScss = new ExtractTextPlugin('css/[name].css');

module.exports = {
  entry: {
    style: 'sass/style.scss',
    head: 'sass/head.scss'
  },

  module: {
      {
        test: /\.scss$/,
        loader: styleScss.extract(
          'style-loader',
          'css!sass'
        )
      }
    ]
  },

  plugins: [
    styleScss
  ]
};
Автор: Tomasz Racia Размещён: 18.07.2016 01:39

7 плюса

1503 Репутация автора

Как экспортировать несколько CSS-файлов / фрагментов, используя Webpack 2 и ExtractTextPlugin

По сути, все, что я хотел сделать, - это воспроизвести стандартное поведение Compass (которое генерирует отдельный файл CSS для каждого файла SCSS, который не является частичным) и добавить PostCSS / Autoprefixer.

Ответ Томаша, наконец, поставил меня на правильный путь, но все же были некоторые ошибки:

  1. Webpack жаловался на отсутствие выходного имени файла, поэтому я добавил один
  2. после этого он пожаловался на то, что «несколько активов отправляются в один файл»

Итак, вот мой текущий, webpack.config.jsкоторый будет автоматически префиксировать и сгенерировать два отдельных файла CSS:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

// var ExtractCSS = new ExtractTextPlugin('dist/[name].css');
var ExtractCSS = new ExtractTextPlugin('dist/[name]');

module.exports = {
    entry: {
        // style: './src/style.scss',
        // extra: './src/extra.scss'
        'style.css': './src/style.scss',
        'extra.css': './src/extra.scss'
    },
    output: {
        // filename: './dist/[name].js'
        filename: './dist/[name]'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        "postcss-loader",
                        "sass-loader"
                    ]
                })
            }
        ]
    },
    plugins: [
        ExtractCSS
    ],
    watch: true
};

Ключевой момент здесь состоял в том, чтобы удалить расширения файлов ExtractTextPlugin()и output{}затем добавить их в entry{}, иначе webpack сгенерирует файл JS для каждого файла CSS, то есть dist/style.jsи dist/extra.js.


Боже мой postcss.config.js, ничего особенного

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

И наконец package.json:

{
    "dependencies": {
    },
    "devDependencies": {
        "css-loader": "^0.26.1",
        "extract-text-webpack-plugin": "^2.0.0-rc.3",
        "node-sass": "^4.5.0",
        "postcss-loader": "^1.3.0",
        "sass-loader": "^6.0.0",
        "style-loader": "^0.13.1",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.3.0"
    }
}

Шляпа на манубо здесь и здесь .


Странный сбой: при $ webpackпервом запуске я получаю то, что обычно является содержимым build.js, добавляемого к каждому экспортированному файлу CSS. Исправление перестройки путем внесения изменений в любой из файлов SCSS исправляет это. Если вы знаете, как решить эту проблему, пожалуйста, дайте мне знать.

Автор: robro Размещён: 15.02.2017 10:10
Вопросы из категории :
32x32