我第一次运行npm run build并上传到我的服务器。
我意识到没有任何样式被很快地拉过来，甚至在我的index.html文件中都没有被引用。
当我运行npm start
这是我的生产配置，我想知道为什么没有运行这一点有什么明显的。
https://jsfiddle.net/vmt20f8w/
我应该指出我正在使用SCSS文件而不是css并将它们导入我的组件js文件中。我认为webpack.config.prod.js然后会采取所有这些scss文件并将它们编译成一个css文件？
更新
我现在用下面的代码更新了我的配置，它仍然没有编译scss。
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}]
},
为了使这一点更加清晰，我实际上有一个公共仓库，人们可以查看我的所有代码来理解问题： https://github.com/maximus-lynn/react-portfolio
答案 0 :(得分：0)
您正在使用加载程序来获取css文件，但不是您的scss文件。安装sass-loader并将配置更改为如下所示：
// Create table cell for job priority.
var jobPriority = jobRow.insertCell(3);
var jobPriorityValue = Number(document.getElementById('job-priority').value);
jobPriority.id = 'jobPriorityCell'+ jobIndex;
var jobPriorityID = 'jobPriority' + jobIndex;
var jobPriorityIconID = 'jobPriorityIcon' + jobIndex;
var jobPriorityNumberID = 'jobPriorityNumber' + jobIndex;
var jobPrioritySave = false;
jobPriority.innerHTML = '<dt id="' + jobPriorityID + '">' + jobPriorityValue + '</dt><input type="number" id="' + jobPriorityNumberID + '"><img src="images/push_mouseout.svg" id="' + jobPriorityIconID + '" class="icon3">';
document.getElementById(jobPriorityID).style.margin = '0 auto';
document.getElementById(jobPriorityID).style.display = 'inline';
document.getElementById(jobPriorityNumberID).style.cssFloat = 'left';
document.getElementById(jobPriorityNumberID).style.marginLeft = '3px';
document.getElementById(jobPriorityNumberID).style.display = 'none';
document.getElementById(jobPriorityNumberID).style.width = '38px';
document.getElementById(jobPriorityNumberID).style.textAlign = 'center';
document.getElementById(jobPriorityNumberID).min = '1';
document.getElementById(jobPriorityNumberID).max = '99';
document.getElementById(jobPriorityIconID).style.marginRight = '3px';
document.getElementById(jobPriorityIconID).style.cssFloat = 'right';
document.getElementById(jobPriorityIconID).style.visibility = 'hidden';
document.getElementById(jobPriority.id).addEventListener('mouseover', function () {
if (!jobPrioritySave)
document.getElementById(jobPriorityIconID).style.visibility = 'visible';
});
document.getElementById(jobPriority.id).addEventListener('mouseout', function () {
if (!jobPrioritySave)
document.getElementById(jobPriorityIconID).style.visibility = 'hidden';
});
document.getElementById(jobPriorityIconID).addEventListener('mouseover', function () {
if (!jobPrioritySave)
document.getElementById(jobPriorityIconID).src = menuImages.push.image.mouseover.src;
else
document.getElementById(jobPriorityIconID).src = menuImages.save.image.mouseover.src;
document.getElementById(jobPriorityIconID).style.cursor = 'pointer';
});
document.getElementById(jobPriorityIconID).addEventListener('mouseout', function () {
if (!jobPrioritySave)
document.getElementById(jobPriorityIconID).src = menuImages.push.image.mouseout.src;
else
document.getElementById(jobPriorityIconID).src = menuImages.save.image.mouseout.src;
});
document.getElementById(jobPriorityIconID).addEventListener('click', function () {
if (!jobPrioritySave) {
jobPrioritySave = true;
document.getElementById(jobPriorityNumberID).value = jobPriorityValue;
document.getElementById(jobPriorityID).style.display = 'none';
document.getElementById(jobPriorityNumberID).style.display = 'initial';
document.getElementById(jobPriorityIconID).style.visibility = 'visible';
document.getElementById(jobPriorityIconID).src = menuImages.save.image.mouseout.src;
}
else {
jobPrioritySave = false;
jobPriorityValue = document.getElementById(jobPriorityNumberID).value;
document.getElementById(jobPriorityID).innerText = jobPriorityValue;
document.getElementById(jobPriorityID).style.display = 'initial';
document.getElementById(jobPriorityNumberID).style.display = 'none';
document.getElementById(jobPriorityIconID).style.visibility = 'visible';
document.getElementById(jobPriorityIconID).src = menuImages.push.image.mouseout.src;
}
});