另一个ReactJS / Webpack n00b在这里。我已经在这个问题上看到了一千种不同的变化,但似乎对他人有用的东西并不适合我。
如何将/app/scss/styles.scss转换为/app/css/styles.css?
当我运行 npm start 时,所有内容似乎都正确编译(没有错误),但我无法找到已编译的styles.css文件。
的package.json
"dependencies": {
"json-loader": "^0.5.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.5.0"
}
webpack.config.js
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + '/app/components/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract('css-loader!sass-loader')
}
]
},
output: {
filename: 'compiled.js',
path: __dirname + '/build'
},
plugins: [
HTMLWebpackPluginConfig,
new ExtractTextPlugin('/app/css/styles.css')
]
};
powershell(命令行)输出
Asset Size Chunks Chunk Names
compiled.js 1.06 MB 0 [emitted] [big] main
/app/css/styles.css 4.5 kB 0 [emitted] main
index.html 10.5 kB [emitted]
chunk {0} compiled.js, /app/css/styles.css (main) 1.03 MB [entry] [rendered]
... yadda yadda ...
[1] ./~/css-loader!./~/sass-loader/lib/loader.js!./app/scss/styles.scss 4.92 kB {0} [built]
webpack: Compiled successfully.
文件结构
非常感谢任何帮助。绝望了。