Как использовать sass-loader для создания css файла из scss и встраивания его в html с помощью express.js. Я также использую реактивный нагреватель
Ниже приведен файл конфигурации
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HTMLWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
const path = require('path');
module.exports = {
entry: ['react-hot-loader/patch',
'webpack-hot-middleware/client?path=http://localhost:3000/__what',
'webpack/hot/only-dev-server', //<- doesnt reload the browser upon syntax errors. This is recommended for React apps because it keeps the state
//'webpack/hot/dev-server', //<- To perform HMR in the browser reloads if HMR update fails.
__dirname + '/app/index.js'],
context: __dirname,
module:{
loaders:[
{
test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query:{
presets:["react","es2015","stage-2"],
plugins: ["react-hot-loader/babel"]
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({fallback:'style-loader' ,use:['css-loader','sass-loader']}),
include:path.resolve(__dirname, '/app/scss')
}
]
},
output:{
filename:'payload-min.js',
path: __dirname + '/build',
publicPath: __dirname + '/build'
},
plugins:[HTMLWebpackPluginConfig ,
new ExtractTextPlugin(__dirname + '/build/payload.css', {
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()]
};
index.js
...
require('css-loader!sass-loader!./scss/payload.scss');
Я никогда не вижу плагин под действием ниже
new ExtractTextPlugin(__dirname + '/build/payload.css', {
allChunks: true
}),
выполнять
webpack -d или webpack не генерируют файл payload.css в /build
index.html
<link rel="stylesheet" type="text/css" href="build/payload.css">
Моя структура каталогов
.
├── app
│ ├── actions
│ │ └── index.js
│ ├── common
│ │ └── constants.js
│ ├── components
│ │ ├── App.js
│ │ ├── DetailsSection.js
│ │ ├── Device.js
│ │ ├── FirmwareImageDetails.js
│ │ ├── Menu.js
│ │ ├── Terminal.js
│ │ └── ViewJson.js
│ ├── index2.html
│ ├── index.html
│ ├── index.js
│ ├── reducers
│ │ ├── index.js
│ │ └── localStorage.js
│ └── scss
│ └── payload.scss
├── build
├── mock_payload.json
├── package.json
├── package-lock.json
├── payload_schema.json
├── README.md
├── server.js
├── webpack.config.js
└── webpack.server.config.js
Проблема заключается в
include:path.resolve(__dirname, '/app/scss')
в загрузчике, удаляющем эту строку, генерируется файл css.
ExtractTextPlugin
загрузчики в линию. Можете ли вы попробовать просто запросить файл scss без загрузчиков впереди? Например,require('./scss/payload.scss');
и посмотреть, если это работает?