2016-04-27 1 views
2

Я строю .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», но мне интересно, как это сделать сгенерируйте файл с помощью сервера, так что мне не нужно вводить терминал каждый раз, когда я вношу изменения в стили.

+0

'WebPack-DEV-server' генерирует файлы и служит из памяти, а не из файловой системы. –

+0

Вам нужно добавить 'style-loader' в ExtractTextPlugin:' ExtractTextPlugin.extract ('style', 'css! Sass') ' –

+0

Хмм, он отображает файл, но не помещает его в каталог. Вот скриншот терминала: http://i.imgur.com/OJGrpKY.png –

ответ

-1

Это абсолютно нормально. webpack-dev-server не записывается на диск. Он служит только из памяти. Вот почему терминальные шоу:

Project is running at http://localhost:9000/ webpack output is served from/ Content not from webpack is served from /Users/dd/Desktop/apps/webpack-starter/dist

Смежные вопросы