nav tabs on admin dashboard
This commit is contained in:
182
node_modules/css-loader/README.md
generated
vendored
182
node_modules/css-loader/README.md
generated
vendored
@@ -50,7 +50,7 @@ module.exports = {
|
||||
|
||||
### `toString`
|
||||
|
||||
You can also use the css-loader results directly as string, such as in Angular's component style.
|
||||
You can also use the css-loader results directly as a string, such as in Angular's component style.
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
@@ -94,37 +94,13 @@ It's useful when you, for instance, need to post process the CSS as a string.
|
||||
|
||||
|Name|Type|Default|Description|
|
||||
|:--:|:--:|:-----:|:----------|
|
||||
|**[`root`](#root)**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
|
||||
|**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
|
||||
|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
|
||||
|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
|
||||
|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
|
||||
|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
|
||||
|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
|
||||
|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
|
||||
|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
|
||||
|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
|
||||
|**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident|
|
||||
|
||||
### `root`
|
||||
|
||||
For URLs that start with a `/`, the default behavior is to not translate them.
|
||||
|
||||
`url(/image.png) => url(/image.png)`
|
||||
|
||||
If a `root` query parameter is set, however, it will be prepended to the URL
|
||||
and then translated.
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { root: '.' }
|
||||
}
|
||||
```
|
||||
|
||||
`url(/image.png)` => `require('./image.png')`
|
||||
|
||||
Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.
|
||||
|
||||
### `url`
|
||||
|
||||
@@ -137,48 +113,6 @@ url(image.png) => require('./image.png')
|
||||
url(~module/image.png) => require('module/image.png')
|
||||
```
|
||||
|
||||
### `alias`
|
||||
|
||||
Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, when you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).
|
||||
|
||||
`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs](https://webpack.js.org/configuration/resolve/#resolve-alias)
|
||||
|
||||
**file.scss**
|
||||
```css
|
||||
@charset "UTF-8";
|
||||
@import "bootstrap";
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
loader: "style-loader"
|
||||
},
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
alias: {
|
||||
"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Check out this [working bootstrap example](https://github.com/bbtfr/webpack2-bootstrap-sass-sample).
|
||||
|
||||
### `import`
|
||||
|
||||
To disable `@import` resolving by `css-loader` set the option to `false`
|
||||
@@ -203,7 +137,7 @@ The syntax `:local(.className)` can be used to declare `className` in the local
|
||||
|
||||
With `:local` (without brackets) local mode can be switched on for this selector. `:global(.className)` can be used to declare an explicit global selector. With `:global` (without brackets) global mode can be switched on for this selector.
|
||||
|
||||
The loader replaces local selectors with unique identifiers. The choosen unique identifiers are exported by the module.
|
||||
The loader replaces local selectors with unique identifiers. The chosen unique identifiers are exported by the module.
|
||||
|
||||
```css
|
||||
:local(.className) { background: red; }
|
||||
@@ -219,7 +153,7 @@ The loader replaces local selectors with unique identifiers. The choosen unique
|
||||
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; }
|
||||
```
|
||||
|
||||
> :information_source: Identifiers are exported
|
||||
> ℹ️ Identifiers are exported
|
||||
|
||||
```js
|
||||
exports.locals = {
|
||||
@@ -228,7 +162,7 @@ exports.locals = {
|
||||
}
|
||||
```
|
||||
|
||||
CamelCase is recommended for local selectors. They are easier to use in the within the imported JS module.
|
||||
CamelCase is recommended for local selectors. They are easier to use within the imported JS module.
|
||||
|
||||
`url()` URLs in block scoped (`:local .abc`) rules behave like requests in modules.
|
||||
|
||||
@@ -238,41 +172,6 @@ file.png => ./file.png
|
||||
```
|
||||
|
||||
You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
|
||||
You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`).
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
localIdentName: '[path][name]__[local]--[hash:base64:5]'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. This requires `webpack >= 2.2.1` (it supports functions in the `options` object).
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
||||
getLocalIdent: (context, localIdentName, localName, options) => {
|
||||
return 'whatever_random_class_name'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> :information_source: For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
|
||||
|
||||
#### `Composing`
|
||||
|
||||
@@ -339,31 +238,51 @@ To import from multiple modules use multiple `composes:` rules.
|
||||
}
|
||||
```
|
||||
|
||||
### `minimize`
|
||||
### `localIdentName`
|
||||
|
||||
By default the css-loader minimizes the css if specified by the module system.
|
||||
You can configure the generated ident with the `localIdentName` query parameter. See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options.
|
||||
|
||||
In some cases the minification is destructive to the css, so you can provide your own options to the cssnano-based minifier if needed. See [cssnano's documentation](http://cssnano.co/guides/) for more information on the available options.
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
localIdentName: '[path][name]__[local]--[hash:base64:5]'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
You can also disable or enforce minification with the `minimize` query parameter.
|
||||
You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. This requires `webpack >= 2.2.1` (it supports functions in the `options` object).
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
minimize: true || {/* CSSNano Options */}
|
||||
modules: true,
|
||||
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
||||
getLocalIdent: (context, localIdentName, localName, options) => {
|
||||
return 'whatever_random_class_name'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> ℹ️ For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
|
||||
|
||||
### `sourceMap`
|
||||
|
||||
To include source maps set the `sourceMap` option.
|
||||
|
||||
I. e. the extract-text-webpack-plugin can handle them.
|
||||
I.e. the extract-text-webpack-plugin can handle them.
|
||||
|
||||
They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which include the server URL.
|
||||
They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which includes the server URL.
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
@@ -408,7 +327,7 @@ import { className } from 'file.css';
|
||||
|
||||
### `importLoaders`
|
||||
|
||||
The query parameter `importLoaders` allows to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
|
||||
The query parameter `importLoaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
@@ -428,7 +347,7 @@ The query parameter `importLoaders` allows to configure how many loaders before
|
||||
}
|
||||
```
|
||||
|
||||
This may change in the future, when the module system (i. e. webpack) supports loader matching by origin.
|
||||
This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
|
||||
|
||||
<h2 align="center">Examples</h2>
|
||||
|
||||
@@ -459,37 +378,8 @@ module.exports = {
|
||||
|
||||
### Extract
|
||||
|
||||
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract the CSS when running in production mode.
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
const env = process.env.NODE_ENV
|
||||
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: env === 'production'
|
||||
? ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [ 'css-loader' ]
|
||||
})
|
||||
: [ 'style-loader', 'css-loader' ]
|
||||
},
|
||||
]
|
||||
},
|
||||
plugins: env === 'production'
|
||||
? [
|
||||
new ExtractTextPlugin({
|
||||
filename: '[name].css'
|
||||
})
|
||||
]
|
||||
: []
|
||||
}
|
||||
```
|
||||
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
|
||||
This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract the CSS when running in production mode.
|
||||
|
||||
<h2 align="center">Maintainers</h2>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user