1
sass-loaderを使用してscssからCSSファイルを生成し、express.jsを使用してhtmlに埋め込む方法Iも反応するホット・ローダーを使用しています以下はWebpackのsass-loaderでCSSが生成されない
は私の設定ファイルである
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', //<- doesn’t 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または構築/下payload.cssファイルを生成しませんWebPACKの
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
私は100％確実ではありませんが、ローダーをインラインで連鎖させて 'ExtractTextPlugin'をバイパスしている可能性があります。正面にローダーなしであなたのscssファイルを要求してみることができますか？例えば。 'require（ './ scss/payload.scss'）;'それが動作するかどうかを確認します。 – DMan
私はそれを試みました。このシナリオでは、babelはrequireを解析しようとしますが、このエラーは./app/scss/payload.scssにあります。 モジュールの解析に失敗しました：/home/ekam/devel/payloadApp/app/scss/payload.scss予期しないトークン6：5） このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | *これらのほとんどはBaseから継承されていますが、いくつか変更したいと思います。 | */ |ボディ{ |色：＃333; | } @ ./app/index.js 36：0-30 @マルチ反応ホットローダー/パッチwebpack-hot-middleware/client？path = http：// localhost：3000/__ what webpack/hot/only- dev-server ./app/index.js – Srikan