How to Import Art as Data for Webpack Css
less-loader
Disclaimer:
less-loader
is a third-party package maintained by community members, it potentially does not have the aforementioned support, security policy or license as webpack, and information technology is not maintained past webpack.
A Less loader for webpack. Compiles Less to CSS.
Getting Started
To brainstorm, you'll demand to install less and less-loader:
npm install less less-loader --save-dev or
yarn add -D less less-loader or
pnpm add -D less less-loader And then add together the loader to your webpack config. For example:
webpack.config.js
module.exports = { module: { rules: [ { exam: /\.less$/i , use: [ // compiles Less to CSS "style-loader" , "css-loader" , "less-loader" , ] , } , ] , } , } ; And run webpack via your preferred method.
Options
-
lessOptions -
additionalData -
sourceMap -
webpackImporter -
implementation
lessOptions
Type:
type lessOptions = import ( 'less' ) .options | ( (loaderContext: LoaderContext) => import ( 'less' ) .options} ) Default: { relativeUrls: true }
Yous can pass any Less specific options to the less-loader through the lessOptions property in the loader options. Come across the Less documentation for all bachelor options in nuance-instance. Since nosotros're passing these options to Less programmatically, you need to laissez passer them in camelCase here:
object
Use an object to pass options through to Less.
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/i , use: [ { loader: "style-loader" , } , { loader: "css-loader" , } , { loader: "less-loader" , options: { lessOptions: { strictMath: truthful , } , } , } , ] , } , ] , } , } ; function
Allows setting the options passed through to Less based off of the loader context.
module.exports = { module: { rules: [ { test: /\.less$/i , utilize: [ "style-loader" , "css-loader" , { loader: "less-loader" , options: { lessOptions : ( loaderContext ) => { // More information well-nigh available properties https://webpack.js.org/api/loaders/ const { resourcePath, rootContext } = loaderContext; const relativePath = path. relative (rootContext, resourcePath) ; if (relativePath === "styles/foo.less" ) { return { paths: [ "accented/path/c" , "absolute/path/d" ] , } ; } render { paths: [ "accented/path/a" , "absolute/path/b" ] , } ; } , } , } , ] , } , ] , } , } ; additionalData
Type:
type additionalData = | cord | ( (content: cord , loaderContext: LoaderContext) => string ) ; Default: undefined
Prepends/Appends Less code to the actual entry file. In this case, the less-loader will not override the source merely only prepend the entry's content.
This is especially useful when some of your Less variables depend on the environment:
Since yous're injecting code, this volition intermission the source mappings in your entry file. Often there's a simpler solution than this, like multiple Less entry files.
string
module.exports = { module: { rules: [ { exam: /\.less$/i , use: [ "fashion-loader" , "css-loader" , { loader: "less-loader" , options: { additionalData: ` @env: ${procedure.env. NODE_ENV } ; ` , } , } , ] , } , ] , } , } ; role
Sync
module.exports = { module: { rules: [ { exam: /\.less$/i , use: [ "style-loader" , "css-loader" , { loader: "less-loader" , options: { additionalData : ( content, loaderContext ) => { // More information virtually available properties https://webpack.js.org/api/loaders/ const { resourcePath, rootContext } = loaderContext; const relativePath = path. relative (rootContext, resourcePath) ; if (relativePath === "styles/foo.less" ) { render "@value: 100px;" + content; } render "@value: 200px;" + content; } , } , } , ] , } , ] , } , } ; Async
module.exports = { module: { rules: [ { test: /\.less$/i , use: [ "manner-loader" , "css-loader" , { loader: "less-loader" , options: { additionalData : async ( content, loaderContext ) => { // More information about available backdrop https://webpack.js.org/api/loaders/ const { resourcePath, rootContext } = loaderContext; const relativePath = path. relative (rootContext, resourcePath) ; if (relativePath === "styles/foo.less" ) { render "@value: 100px;" + content; } return "@value: 200px;" + content; } , } , } , ] , } , ] , } , } ; sourceMap
Blazon:
type sourceMap = boolean ; Default: depends on the compiler.devtool value
Past default generation of source maps depends on the devtool option. All values enable source map generation except eval and faux value.
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/i , employ: [ "manner-loader" , { loader: "css-loader" , options: { sourceMap: truthful , } , } , { loader: "less-loader" , options: { sourceMap: true , } , } , ] , } , ] , } , } ; webpackImporter
Type:
blazon webpackImporter = boolean ; Default: true
Enables/Disables the default webpack importer.
This can improve performance in some cases. Employ it with caution because aliases and @import at-rules starting with ~ will non work.
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/i , employ: [ "way-loader" , "css-loader" , { loader: "less-loader" , options: { webpackImporter: false , } , } , ] , } , ] , } , } ; implementation
Blazon:
type implementation = object | string ; less-loader uniform with Less 3 and 4 versions
The special implementation choice determines which implementation of Less to use. Overrides the locally installed peerDependency version of less.
This selection is only really useful for downstream tooling authors to ease the Less 3-to-4 transition.
object
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/i , use: [ "style-loader" , "css-loader" , { loader: "less-loader" , options: { implementation: require ( "less" ) , } , } , ] , } , ] , } , } ; cord
webpack.config.js
module.exports = { module: { rules: [ { examination: /\.less$/i , utilise: [ "style-loader" , "css-loader" , { loader: "less-loader" , options: { implementation: crave. resolve ( "less" ) , } , } , ] , } , ] , } , } ; Examples
Normal usage
Chain the less-loader with the css-loader and the fashion-loader to immediately utilise all styles to the DOM.
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/i , apply: [ { loader: "style-loader" , // creates fashion nodes from JS strings } , { loader: "css-loader" , // translates CSS into CommonJS } , { loader: "less-loader" , // compiles Less to CSS } , ] , } , ] , } , } ; Unfortunately, Less doesn't map all options ane-by-ane to camelCase. When in doubt, cheque their executable and search for the nuance-case option.
Source maps
To enable sourcemaps for CSS, you'll demand to pass the sourceMap belongings in the loader's options. If this is not passed, the loader will respect the setting for webpack source maps, set in devtool.
webpack.config.js
module.exports = { devtool: "source-map" , // any "source-map"-like devtool is possible module: { rules: [ { examination: /\.less$/i , use: [ "style-loader" , { loader: "css-loader" , options: { sourceMap: true , } , } , { loader: "less-loader" , options: { sourceMap: true , } , } , ] , } , ] , } , } ; If you want to edit the original Less files inside Chrome, in that location'southward a good blog post. The blog post is about Sass but it also works for Less.
In product
Usually, it'due south recommended to excerpt the fashion sheets into a defended file in production using the MiniCssExtractPlugin. This way your styles are not dependent on JavaScript.
Imports
Kickoff we endeavor to utilize built-in less resolve logic, then webpack resolve logic (aliases and ~).
Webpack Resolver
webpack provides an avant-garde machinery to resolve files. less-loader applies a Less plugin that passes all queries to the webpack resolver if less could non resolve @import. Thus yous can import your Less modules from node_modules.
@import "bootstrap/less/bootstrap" ; Using ~ is deprecated and can be removed from your code (we recommend information technology), but we still back up information technology for historical reasons. Why you tin can removed it? The loader will start endeavor to resolve @import as relative, if it cannot be resolved, the loader will try to resolve @import inside node_modules. Just prepend them with a ~ which tells webpack to look upwards the modules.
@import "~bootstrap/less/bootstrap" ; Default resolver options can be modified by resolve.byDependency:
webpack.config.js
module.exports = { devtool: "source-map" , // any "source-map"-similar devtool is possible module: { rules: [ { exam: /\.less$/i , use: [ "style-loader" , "css-loader" , "less-loader" ] , } , ] , } , resolve: { byDependency: { // More options tin be found here https://webpack.js.org/configuration/resolve/ less: { mainFiles: [ "custom" ] , } , } , } , } ; It's of import to only prepend it with ~, because ~/ resolves to the home-directory. webpack needs to distinguish between bootstrap and ~bootstrap, because CSS and Less files take no special syntax for importing relative files. Writing @import "file" is the same as @import "./file";
Less Resolver
If you specify the paths option, modules will be searched in the given paths. This is less default behavior. paths should exist an array with absolute paths:
webpack.config.js
module.exports = { module: { rules: [ { test: /\.less$/i , utilise: [ { loader: "style-loader" , } , { loader: "css-loader" , } , { loader: "less-loader" , options: { lessOptions: { paths: [path. resolve (__dirname, "node_modules" ) ] , } , } , } , ] , } , ] , } , } ; Plugins
In order to use plugins, simply set the plugins option like this:
webpack.config.js
const CleanCSSPlugin = crave ( 'less-plugin-clean-css' ) ; module.exports = { ... { loader: 'less-loader' , options: { lessOptions: { plugins: [ new CleanCSSPlugin ( { avant-garde: true } ) , ] , } , } , } , ... } ; ℹ️ Access to the loader context inside the custom plugin can be done using the
pluginManager.webpackLoaderContextproperty.
module.exports = { install : role ( less, pluginManager, functions ) { functions. add ( "pi" , office ( ) { // Loader context is available in `pluginManager.webpackLoaderContext` return Math. PI ; } ) ; } , } ; Extracting fashion sheets
Bundling CSS with webpack has some overnice advantages similar referencing images and fonts with hashed urls or hot module replacement in development. In production, on the other hand, it's non a good thought to utilize your style sheets depending on JS execution. Rendering may be delayed or even a FOUC might be visible. Thus it's often still improve to have them as separate files in your final production build.
There are two possibilities to extract a manner sheet from the bundle:
-
excerpt-loader(simpler, only specialized on the css-loader's output) -
MiniCssExtractPlugin(more complex, only works in all use-cases)
CSS modules gotcha
There is a known problem with Less and CSS modules regarding relative file paths in url(...) statements. See this issue for an caption.
Contributing
Please take a moment to read our contributing guidelines if you haven't all the same done so.
CONTRIBUTING
License
MIT
Source: https://webpack.js.org/loaders/less-loader/
0 Response to "How to Import Art as Data for Webpack Css"
Enregistrer un commentaire