【发布时间】：2020-02-10 15:58:45
【问题描述】：
我正在尝试使用 sass 为在线课程设置示例项目的样式。一切都编译成功，但我在浏览器中看不到任何样式。
我的样式文件夹中有五个文件：
base.scss
footer.scss
form.scss
header.scss
resets.scss
当我跑步时
npm run build-dev
一切都会编译。在我的 main.js 文件中，我确实看到了：
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, "/* http://meyerweb.com/eric/tools/css/reset/\r\n v2.0 | 20110126\r\n License: none (public domain)\r\n*/\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline; }\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {\n display: block; }\n\nbody {\n line-height: 1; }\n\nol, ul {\n list-style: none; }\n\nblockquote, q {\n quotes: none; }\n blockquote:before, blockquote:after, q:before, q:after {\n content: '';\n content: none; }\n\ntable {\n border-collapse: collapse;\n border-spacing: 0; }\n", ""]);
// Exports
module.exports = exports;
所以我在 main.js 中看到了 resets.scss，但在我的浏览器中没有看到任何样式。这是我的配置文件：
webpack.dev.js：
const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/client/index.js',
mode: 'development',
devtool: 'source-map',
stats: 'verbose',
module: {
rules: [
{
test: '/\.js$/',
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/client/views/index.html",
filename: "./index.html",
}),
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
})
]
}
这是我的客户端 index.js 文件：
import { checkForName } from './js/nameChecker';
import { handleSubmit } from './js/formHandler';
import './styles/resets.scss';
console.log(checkForName);
alert("I EXIST")
console.log("CHANGE!!");
这是我的 index.html 文件：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/styles/resets.scss">
<link rel="stylesheet" href="/styles/base.scss">
<link rel="stylesheet" href="/styles/header.scss">
<link rel="stylesheet" href="/styles/form.scss">
<link rel="stylesheet" href="/styles/footer.scss">
</head>
<body>
<header>
<div class="">
Logo
</div>
<div class="">
navigation
</div>
</header>
<main>
<section>
<form class="" onsubmit="return handleSubmit(event)">
<input id="name" type="text" name="input" value="" onblur="onBlur()" placeholder="Name">
<input type="submit" name="" value="submit" onclick="return handleSubmit(event)" onsubmit="return handleSubmit(event)">
</form>
<section>
<section>
<strong>Form Results:</strong>
<div id="results"></div>
</section>
</main>
<footer>
<p>This is a footer</p>
</footer>
</body>
</html>
我尝试将 .scss 命名为 .css。我也试过用这个来调用css：
<script type="text/javascript" src="../../../dist/main.js"></script>
而不是每个单独的文件。这是我的 resets.scss 文件：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
&:before, &:after {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
这是我的其他 css 文件之一，例如：
header.scss：
header {
display: flex;
justify-content: space-between;
padding: 10px 40px;
}
为什么我没有看到标题显示为弹性框？
任何帮助将不胜感激。 index.html 和 css 文件由课程提供，有时提供的代码不完整。是这里的问题吗？文件编译不正确吗？
非常感谢， 迈克
【问题讨论】：
标签： javascript css webpack sass