我正在尝试使用 sass 为在线类(class)设计示例元素。一切都编译成功，但我在浏览器中没有看到任何样式。
我的样式文件夹中有五个文件:
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 文件之一:
标题.scss:
header {
display: flex;
justify-content: space-between;
padding: 10px 40px;
}
为什么我没有看到标题显示为 flex 盒？
任何帮助将不胜感激。 index.html 和 css 文件是类(class)提供的，有时提供的代码不完整。这是这里的问题吗？文件编译不正确吗？
非常感谢， 迈克
最佳答案
我明白了。我没有在index.js 中导入scss 文件:
import { checkForName } from './js/nameChecker';
import { handleSubmit } from './js/formHandler';
import './styles/resets.scss';
import './styles/base.scss'
import './styles/form.scss'
import './styles/footer.scss'
import './styles/header.scss'
console.log(checkForName);
alert("I EXIST")
console.log("CHANGE!!");
关于javascript - node webpack sass SASS 未在浏览器中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60154025/