我已经读了那么多该死的教程、门票等，但我就是无法解决它...... 我有一个带有 webpack 的 React 项目。我尝试使用 .scss 文件进行样式设置。 所以我有这个 webpack.config.js:
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devServer: {
contentBase: "./src"
},
entry: [
'babel-polyfill',
'./src/app'
],
output: {
publicPath: '/',
filename: 'app.bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
//Babel
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ["es2015", "react"],
}
},
//Sass
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('src/style.css', {
allChunks: true
})
],
debug: true
};
以及 src/ 中的 App.scss 文件:
body {
margin: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
color: pink;
}
h2 {
color: greenyellow;
}
在我的 index.html 中，我包含了 css 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aline</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
</head>
<body >
<div id="content"></div>
<script src="../app.bundle.js"></script>
</body>
</html>
然后我调用webpack-dev-server --inline --hot --quiet。
比 chrome 总是告诉我它找不到 css 文件，而且 webpack 似乎并不关心我的 scss 文件....
我的 package.json 依赖项将是:
"devDependencies": {
"babel-core": "6.17.0",
"babel-loader": "6.2.5",
"babel-plugin-transform-runtime": "6.15.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-runtime": "6.11.6",
"css-loader": "0.25.0",
"extract-text-webpack-plugin": "1.0.1",
"node-sass": "3.10.1",
"sass-loader": "4.0.2",
"style-loader": "0.13.1",
"webpack": "1.13.2",
"webpack-dev-server": "1.16.2"
},
最佳答案
Webpack 开发者自己在 Twitter 上得到了答案!这是我自己的愚蠢。我仍在学习 webpack 等，我忘记了 webpack 是如何工作的。 它根据依赖关系构建一棵树，因此从逻辑上讲，它需要以某种方式了解 scss 文件...所以我告诉我的输入点(app.js)每个需要有关我的 scss 文件和 TADA 的信息。就这样。 我没有考虑过这一点，因为所有使用 ExtractTextPlugin 的教程都解释了它收集所有 scss 文件并从中生成单个 css。所以我想“哦，它从我的文件夹中收集了我所有的 scss 文件。很好!”但是是的...不xD它从树而不是磁盘收集它:p
关于javascript - 带有 ExtractTextPlugin 的 webpack-dev-server 不会生成 scss 文件的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40293818/