Я пытаюсь использовать sass для разработки примера проекта для онлайн-курса. Все успешно компилируется, но я не вижу ни одного из стилей в браузере.
У меня в папке стилей пять файлов:
base.scss
footer.scss
form.scss
header.scss
resets.scss
Когда я запускаю
npm run build-dev
все компилируется. В моем основном файле. 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;
, поэтому я вижу в главном. Resets.s css. js, но я не вижу никаких стилей в своем браузере. Это мой конфигурационный файл:
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
})
]
}
Это мой индекс клиента. js файл:
import { checkForName } from './js/nameChecker';
import { handleSubmit } from './js/formHandler';
import './styles/resets.scss';
console.log(checkForName);
alert("I EXIST")
console.log("CHANGE!!");
и это мой индекс. html file:
<!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>
Я попытался назвать .s css. css. Я также попытался вызвать css с этим:
<script type="text/javascript" src="../../../dist/main.js"></script>
вместо каждого отдельного файла. Это мой файл сброса.s css:
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.s css:
header {
display: flex;
justify-content: space-between;
padding: 10px 40px;
}
Почему я не вижу заголовок, отображаемый как flexbox?
Любая помощь будет принята с благодарностью. index. html и файлы css были предоставлены на уроке, и иногда предоставленный код является неполным. Это проблема здесь? Файлы не компилируются правильно?
Большое спасибо, Майк