0
webpackを使ってsassからcssにコンパイルする際に問題があります。 webpackでscssファイルをコンパイルすると、結果として得られるCSSはscssファイルと同じになり、scssファイルはエントリポイントの1つになります。これは、何らかの形でサスローダーの実行に失敗したことを意味しますが、エラーメッセージはありません。セットアップに何が問題なのかよく分かりません。私は、Window 7とUbuntu 15で試してみましたが、問題はWebpack - sassをコンパイルした後、結果として得られるCSSはscssファイルと同じです
main.js
import 'scss/main.scss';
main.scss持続:
$color : red;
body {
background-color: $color;
}
bundle.css(コンパイル済みのCSSを):
$color : red;
body {
background-color: $color;
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
devtool: 'eval',
resolve: {
root: path.resolve(__dirname),
alias: {
js: 'src/javascript',
scss: 'src/stylesheet',
},
extensions: ['', '.js', '.jsx']
},
entry: [
'./src/javascript/main.js'
],
output: {
path: path.join(__dirname, 'dist', 'static'),
filename: 'bundle.js',
chunkFilename: "[chunkhash].js",
publicPath: '/static/'
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['babel'],
include: [ path.join(__dirname, 'src', 'javascript') ]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'raw-loader', 'sass-loader'),
include: [ path.join(__dirname, 'src', 'stylesheet') ]
}]
}
};
コマンドメッセージ:
Version: webpack 1.12.14
Time: 8406ms
Asset Size Chunks Chunk Names
bundle.js 970 bytes 0 [emitted] main
bundle.css 22 bytes 0 [emitted] main
chunk {0} bundle.js, bundle.css (main) 110 bytes [rendered]
[0] multi main 28 bytes {0} [built]
[1] ./src/javascript/main.js 41 bytes {0} [built]
[2] ./src/stylesheet/main.scss 41 bytes {0} [built]
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 43 bytes [rendered]
[0] ./~/raw-loader!./src/stylesheet/main.scss 43 bytes {0} [built]
はい、あなたは正しいです。問題は解決された !!しかし、私はその違いを本当に理解していません。私は '' raw!sass''は '' raw ''、 'sass''の単なる構文砂糖であると考えました。これら2つのステートメントの違いは何ですか? – deepone
これはプラグインの設計と関係があります。残念ながらwebpackの残りの部分とは一貫していません。 –