Живая горячая перезагрузка webpack для sass
Я создаю рабочий процесс для стартера реакции и хотел бы, чтобы мой браузер автоматически перезагружался, когда я вношу изменения в свои файлы scss.
В настоящее время веб-пакет будет перезагружен в горячем режиме, когда я внесу изменения в свой файл index.js (установленный в качестве точки входа). Однако, когда я изменяю / добавляю код scss в свой файл scss, он компилируется, но css нигде не выводится и не вызывает перезагрузку браузера.
Я новичок в webpack, был бы очень признателен за некоторое понимание здесь.
Вот мой webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/scss/style.scss'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/index_bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].css',
outputPath: 'css/'
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Мой файл точки входа index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';
ReactDOM.render(
<App/>,
document.getElementById('App')
);
И мой компонент приложения
import React, {Component} from 'react';
import '../../dist/css/style.css';
class App extends Component {
render() {
return (
<div>
<p>Test</p>
</div>
)
}
}
export default App;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Фактически, style-loader - это тот, который является ответственный для CSS HMR.
Вы должны добавить его в конец конвейера стилей, только для разработчиков. Для производства вы можете оставить свой config.
Это должно выглядеть примерно так:
const devMode = process.env.NODE_ENV !== 'production'
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
Обращать внимание, наилучшая практика извлечения css в отдельный файл - использовать MiniCssExtractPlugin, если вы используете webpack 4, или ExtractTextWebpackPlugin, если вы используете webpack <4.
Я добавил это, однако теперь, когда я использую мою команду сборки, я не получаю скомпилированный файл css в моем каталоге dist
В режиме разработки вы будете использовать style-loader, это означает, что ваш CSS будет внутри файла. Только в производственном режиме вы получите внешний файл css
Это именно то, чего мне не хватало. По какой-то причине webpack-dev-server не применяет таблицу стилей (import 'styles.css') при импорте без (только проверено без) с использованием модулей css ...
Попробуйте использовать Пакет вместо Webpack. Раньше я тратил часы на настройку Webpack, чтобы заставить работать горячую перезагрузку. С Parcel большинство вещей просто «работает» без файла конфигурации. Например, я хотел начать использовать шаблоны Pug. Parcel распознал расширение .pug и автоматически загрузил необходимые зависимости NPM!
В вашем случае просто включите файл SCSS в свое приложение, например: import '../scss/style.scss' (обратите внимание, что путь к исходному файлу .scss указан относительно index.js). Parcel автоматически сделает «разумные» вещи.
Вот несколько ссылок, чтобы начать работу с Parcel + React + SASS:
Заметные преимущества и недостатки Parcel vs WebPack:
- Посылка требует минимальной настройки; часто без конфигурации.
- Parcel обычно строится намного быстрее, чем WebPack.
- Сервер разработки WebPack кажется более стабильным. (Сервер Parcel dev должен время от времени перезагружаться, и это плохо работает с Dropbox. По-видимому, это должно быть исправлено в версии 2.0.)
- Когда требуется (необычная) конфигурация, может быть неочевидно, как это сделать в Parcel; по крайней мере, в WebPack вся конфигурация находится в одном месте.
- Иногда автоматическая конфигурация Parcel делает то, чего люди не ожидают, сбивая их с толку.
Я согласен со всем, что касается посылки. К сожалению, проект, над которым я работаю, был построен с использованием WebPack, и его сохранение является абсолютным требованием. Поэтому мне нужно пройти через MiniCSS, как описано в моем собственном вопросе: stackoverflow.com/questions/56318991/…
npm install --save-dev style-loader CSS-loader
npm install --save-dev html-webpack-plugin
добавьте сценарий npm в package.json для запуска webpack-dev-server:
"scripts": {
"start": "webpack-dev-server"
},
Webpack нужен файл конфигурации, чтобы знать, как обрабатывать различные типы зависимостей, которые вы используете в нашем приложении, и для этого создайте файл с именем webpack.config.js, добавьте три атрибута в webpack.config.js: Первая - это запись, которая сообщает Webpack, где находится главный файл нашего приложения:
entry: './index.js'
Второй - модуль, в котором мы сообщаем Webpack, как загружать внешние зависимости. У него есть атрибут loaders, в котором мы устанавливаем определенный загрузчик для каждого из типов файлов:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react'],
}
},
{
test: /\.css$/,
loader: 'style!css?}]}
Мы говорим, что файлы, соответствующие регулярному выражению .js, загружаются с помощью загрузчика babel, чтобы они были перенесены и загружены в пакет. Вторая запись в массиве loaders сообщает Webpack, что делать при импорте файла CSS, и он использует css-loader с включенным флагом модулей для активации модулей CSS. Результат преобразования затем передается загрузчику стилей, который вставляет стили в заголовок страницы.
Наконец, мы включаем плагин HTML, чтобы сгенерировать для нас страницу.
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [new HtmlWebpackPlugin()]
Два дня назад я открыл более конкретный вопрос о MiniCSS. Эта награда также распространяется на это: stackoverflow.com/questions/56318991/…