Я строю .SASS в один файл .CSS с помощью webpack, но он только экспортирует файл, когда я «webpack» в терминале. Когда я бегу «WebPack-DEV-сервер» он видит изменения, но не создает/изменить выходной файл .css:Webpack dev server - экспорт файла .CSS при изменении
var webpack = require('webpack');
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js', // this exports the final .js file
publicPath: '/public'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
},
{
test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') // this loads SASS
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("./bundle.css") //this exports the CSS file
],
resolve: {
modulesDirectories: ['node_modules', 'src'],
extensions: ['', '.js', '.scss'],
root: [path.join(__dirname, './src')]
}
};
Он работает полностью устраивает только «WebPack», но мне интересно, как это сделать сгенерируйте файл с помощью сервера, так что мне не нужно вводить терминал каждый раз, когда я вношу изменения в стили.
'WebPack-DEV-server' генерирует файлы и служит из памяти, а не из файловой системы. –
Вам нужно добавить 'style-loader' в ExtractTextPlugin:' ExtractTextPlugin.extract ('style', 'css! Sass') ' –
Хмм, он отображает файл, но не помещает его в каталог. Вот скриншот терминала: http://i.imgur.com/OJGrpKY.png –