CSS Modules
https://github.com/css-modules/css-modules
https://css-tricks.com/css-modules-part-1-need/
css-loader
https://github.com/webpack-contrib/css-loader
{
test: /.((s*)css|sass)$/,
// test: /.(css|scss|sass)$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader",
options: {
url: false,
// url: true,
minimize: true,
sourceMap: true,
modules: true,
importLoaders: 1,
localIdentName: "[name]__[local]___[hash:base64:8]",
// localIdentName: "[local]",
}
},
{
loader: "sass-loader",
options: {
sourceMap: true,
}
}
],
fallback: "style-loader",
// allChunks: true,
// publicPath: "./public",// not work ant all
}),
},
className
.class
config
@charset "UTf-8";
/* test.css */
/* #region */
:root {
--cololr: #000;
--default-cololr: #fff;
--new-cololr: #0f0;
}
[data-class="links"] {
color: white;
background-color: DodgerBlue;
padding: 20px;
text-align: center;
margin: 10px;
}
img {
border: 1px solid red;
}
.class-test {
color: red;
}
/* #endregion */
@charset "UTf-8";
/* test.css */
/* #region */
:root {
--cololr: #000;
--default-cololr: #fff;
--new-cololr: #0f0;
}
[data-class="links"] {
color: white;
background-color: DodgerBlue;
padding: 20px;
text-align: center;
margin: 10px;
}
img {
border: 1px solid red;
}
.class-test {
color: red;
}
/* #endregion */
vs code & css auto prefix
{
"window.zoomLevel": 0,
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"jspm_packages": true,
"node_modules": true,
"**/.zip": true,
"**/.sh": true
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true
},
"editor.formatOnSave": false,
"editor.renderWhitespace": "all",
"editor.fontSize": 16,
"editor.tabSize": 4,
"editor.multiCursorModifier": "alt",
"editor.wordWrap": "on",
"editor.insertSpaces": true,
"files.encoding": "utf8",
"terminal.integrated.shell.windows": "C:\Windows\System32\cmd.exe",
"[typescript]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true
},
"[markdown]": {
"editor.formatOnSave": true,
"editor.renderWhitespace": "all",
"editor.acceptSuggestionOnEnter": "off"
},
"files.associations": {
"*.jsx": "javascriptreact",
"*.js": "javascriptreact"
},
"editor.snippetSuggestions": "top",
"jsDocCompletion.enabled": true,
// When enabled, typing /** triggers documentation automatically.
"docthis.automaticForBlockComments": true,
// When enabled, type information is added to comment tags.
"docthis.includeTypes": true,
// When enabled, memberOf information is added to comment tags on class members.
"docthis.includeMemberOfOnClassMembers": true,
// When enabled, memberOf information is added to comment tags on interface members.
"docthis.includeMemberOfOnInterfaceMembers": true,
// When enabled, JSDoc comments for functions and methods will include @description.
"docthis.includeDescriptionTag": true,
// When enabled, hungarian notation will be used as a type hint.
"docthis.enableHungarianNotationEvaluation": true,
// When enabled, will use names of params & methods as type hints.
"docthis.inferTypesFromNames": true,
// When enabled, will add the @author tag.
"docthis.includeAuthorTag": true,
// When docthis.includeAuthorTag is enabled, will add @author tag with this value.
"docthis.authorName": "xgqfrms",
// HTML
"html.format.extraLiners": "/html",
"html.format.enable": false,
"html.format.contentUnformatted": "body, div, section, script, pre,code,textarea",
"explorer.confirmDragAndDrop": false,
"git.ignoreMissingGitWarning": true,
"explorer.confirmDelete": false,
// The list of attributes to add support for, and what prefixes each one should receive.
"css-auto-prefix.prefixes": {
"transform": [
"webkit",
"moz",
"ms",
"o"
],
"transition": [
"webkit",
"moz",
"ms",
"o"
],
"border-radius": [
"webkit",
"moz",
"ms",
"o"
],
"animation": [
"webkit"
],
"box-reflect": [
"webkit"
],
"filter": [
"webkit"
],
"font-feature-settings": [
"webkit",
"moz"
],
"backface-visibility": [
"webkit"
],
"box-decoration-break": [
"webkit"
],
"hyphens": [
"webkit",
"moz",
"ms"
],
"marquee-direction": [
"webkit"
],
"marquee-play-count": [
"webkit"
],
"marquee-speed": [
"webkit"
],
"marquee-style": [
"webkit"
],
"text-combine-upright": [
"webkit",
"moz",
"ms"
],
"text-decoration-color": [
"moz"
],
"text-decoration-line": [
"moz"
],
"text-decoration-style": [
"moz"
],
"text-orientation": [
"webkit"
],
"writing-mode": [
"webkit",
"ms"
]
}
}
which css attributes needs prefixes?
http://shouldiprefix.com/#box-sizing
https://caniuse.com/#search=box-sizing
https://developer.mozilla.org/en-US/
https://www.sitepoint.com/vendor-specific-properties/
https://stackoverflow.com/questions/5411026/list-of-css-vendor-prefixes
https://www.w3schools.com/cssref/css3_browsersupport.asp
https://www.w3schools.com/cssref/css3_browsersupport.asp
https://bitsofco.de/css-vendor-prefixes/
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！