2
我正在使用webpack将.SASS生成一个.CSS文件,但它只在终端中输入“webpack”时导出文件。当我运行“的WebPack-dev的服务器”,它看到的变化,但不生成/更改输出.css文件:Webpack开发服务器 - 导出.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 –