Глобальный характер CSS
В течение долгого времени CSS всегда существовал на странице в целом.В прошлом влияние этой "фичи" не было очень большим.Обратите внимание на нейминг.Например, использование БЭМ также может решить проблему до определенная степень.
Однако с растущим спросом на веб-компонентизацию эта функция CSS стала веревкой, которая ограничивает свободу действий разработчиков. Каждое имя класса CSS может вызвать неожиданные конфликты или быть перезаписанным различными компонентами. будьте осторожны и обращайте внимание на то, будут ли конфликты в глобальной среде.
Более серьезно, в контексте компонентизации JS + шаблон + CSS можно назвать полным компонентом.Если каждый компонент ссылается только на файл CSS, вы можете избежать возможных конфликтов между различными компонентами, только ограничив именование классов. В то же время из-за глобального характера CSS стили компонентов могут влиять друг на друга, что полностью нарушает принцип низкой связанности и высокой связанности компонентов.
Конечно, CSS — это не язык программирования, а DSL, мы не могли бы просить об этом так много, но невольные программисты придумали различные способы сделать CSS более похожим на язык программирования. Эта проблема.
Решение CSS-модулей отличается: оно добавляет концепцию локальной/глобальной области действия при написании CSS.
CSS Modules
Правила модуля CSS очень просты, все, что вы не укажете, это глобальная область, будет обрабатываться локальной областью.
Возьмем SASS в качестве примера. Например, если вы пишете абзац:
.title {
height: 80px;
line-height: 80px;
font-size: 24px;
color: #0a95bf;
}Выходит такой стиль:
.title_1hf8_ {
height: 80px;
line-height: 80px;
font-size: 24px;
color: #0a95bf
}titleсталtitle_1hf8_Как вы, наверное, догадались, CSS-модули обеспечивают локальную область видимости путем кодирования классов с помощью определенных правил.
Ссылка в компоненте выглядит так:
import * as Style from './index.scss';Затем это можно использовать в шаблоне:
<div v-bind:class="Sytles.title">MD Converter</div>Выходит html:
<div class="title_1hf8_">MD Converter</div>Здесь используются TypeScript и Vue, и в других местах их использование аналогично.
"Локальная область" есть, а глобальная область - это следующее:
:global {
.output {
background: #fff;
height: 100%;
min-height: 100%;
padding: 1em;
word-break: break-all;
}
}используйте то, что вы хотите, как глобальную область:global{}Просто заверните его.
Работа с SASS и TypeScript.
Как правило, вы можете использовать css-загрузчик Webpack с модулем CSS, поскольку здесь используется TypeScript, он будет немного отличаться.
Сначала идет полный файл конфигурации Webpack:
var path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
//页面入口文件配置
entry: {
"index.entry": __dirname + '/src/js/index.entry.js',
},
//入口文件输出配置
output: {
filename: '[name].js',
chunkFilename: "[name].chunk.js",
},
externals: {
"vue": "Vue",
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
output: {comments: false},
sourceMap: true
})
],
module: {
rules: [
{
test: /\.html$/,
loader: 'text-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
use: [
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
camelCase: true,
minimize: true,
localIdentName: "[local]_[hash:base64:5]"
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
})
},
],
},
plugins: [
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('../css/[name].css').replace('css/js','css');
},
allChunks: true
}),
]
};Здесь в основном используются три загрузчика, а именно sass-loader, typings-for-css-modules-loader и style-loader.
Если это не TypeScript, замените typings-for-css-modules-loader на css-loader и немного измените конфигурацию.
Включить модуль CSS легко, всего одним предложениемmodules: true,Тогда есть вариантlocalIdentName: "[local]_[hash:base64:5]"используется для указания правил генерации имен классов,title_1hf8_Он основан на этом правиле, вы также можете сделать его более сложным, например[path][name]__[local]--[hash:base64:5]
Кратко объясните роль следующих трех загрузчиков:
- Роль sass-loader, конечно же, заключается в компиляции файлов SASS в файлы CSS;
- typings-for-css-modules-loader накладывает слой поверх css-loader, и его параметры полностью совместимы с css-loader. Кроме того, он будет генерировать соответствующий файл интерпретации xxx.scss.d.ts для каждого файла SASS, чтобы его можно было правильно проанализировать в TypeScript, а редактор также может иметь очень удобные подсказки кода.
- style-loader должен использовать стиль
<style>Тег попадает на страницу.
Весь процесс состоит в том, чтобы прочитать файл SCSS, передать его в sass-loader для обработки в css, затем сгенерировать файл xxx.scss.d.ts для загрузчика typings-for-css-modules-loader и обработать css во что-то, что может использоваться JavaScript (этот шаг фактически обрабатывается css-загрузчиком. Зачем вам нужно обрабатывать файл css во что-то, что может использоваться JavaScript, потому что веб-пакет может обрабатывать только JavaScript, поэтому его необходимо преобразовать) и, наконец, отправьте обработанный файл в загрузчик стилей, чтобы загрузить страницу.
На самом деле суть загрузчика в том,anything to JavaScript, потому что Webpack обрабатывает только JavaScript. Имея это в виду, у вас будет четкое понимание того, почему вы должны использовать этот загрузчик и тот загрузчик.
При написании компонентов Vue на TypeScript при определении компонентов вы можете потребовать html в качестве шаблона:
@Component({
template: require('./index.html'),
})Зачем вам нужны html-файлы, потому что в конфигурации веб-пакета выше есть это предложение:
{
test: /\.html$/,
loader: 'text-loader'
},использовать html-файлtext-loaderПосле обработки превратите require html в фрагмент текста и используйте Webpack для элегантного разделения шаблонов и кода.
разное
Кроме того, модули CSS также имеют такие функции, как определение переменных, наследование других классов и импорт других модулей, но большинство из этих SASS также имеют их.
Наконец, простой пример, простой редактор Markdown для TypeScript + Vue.
адрес демо-кода:
github.com/bob-chen/md
разбитые мысли
Запишите некоторые мысли, напишите о науке, технике и гуманитарных науках, напишите о жизненном положении, напишите об опыте чтения, в основном о чепухе и сантиментах.
Добро пожаловать, чтобы обратить внимание и общаться.
Официальный аккаунт WeChat: Поэма программиста и дистанция
Публичный идентификатор : MonkeyCoder-Life