“This is my 15th day of participating in the 2022 First Post Challenge. For more information, please check out: 2022 First Post Challenge.
1. css
Currently, there is no css code in our vite project, but in a real project, there will be css code, so can Vite help us to support css ? We can test this by creating a new css folder in the src directory and a new style.css file in the css folder with the following contents:
body {
background-color: #f66;
}
With this css file in mind, let’s first think about whether this css file is now packaged? Obviously, no. Because it’s not in the project’s dependencies, it won’t be packaged. So where are the project’s dependencies? The entry point for project dependencies is in the entry file index.html :
<script src="./src/main.js" type="module"></script>
Then we can import this style.css file in the src/main.js file and add it to the project’s dependency file:
After you save the changes, you’ll see a line printed in the terminal that tells us the page has reloaded. At this point look at the browser page again:
As you can see, the background color of the page has been successfully changed to the color we set. As you can see, the css code is already in effect, so Vite supports the handling of the css code by default (instead of having to use css-loader and style-loader , as is the case with Webpack ). This is also achieved by inserting a <style> element containing the relevant style code into the <head> element:
2. less
What if there is still less code in the project? For example, let’s add a few lines of code to the src/main.js file, create a <div> element that applies the title class, and add some text that will later be added to the <body> element:
...
const titleEl = document.createElement('div')
titleEl.className = 'title'
titleEl.innerText = "Hello Vite"
document.body.appendChild(titleEl)
Then create a new title.less file in the css folder with the following contents (to set some styles for the title class):
@fontSize: 30px;
@fontColor: yellow;
.title {
font-size: @fontSize;
color: @fontColor;
}
Next, introduce this title.less file in the src/main.js file:
After saving the changes, you will notice that the error is reported in the terminal:
The idea is that the current preprocessor relies on the tool less , but Vite doesn’t find it. Indeed, we don’t have it installed yet, so we need to install the less tool first (as I said earlier when talking about Webpack , when using less-loader to load the less file, we also need to rely on the less tool, so we must install less first. Only in Vite , we don’t need to use less-loader any more, but we still need to use the less tool):
npm install less -D
After installing less , execute the npx vite command to start the project:
At this point there is no problem, and then look at the effect in the browser:
As you can see, the font size and color of Hello Vite have been successfully rendered, and Vite has compiled the less code into css code.
3. postcss
When we talked about Webpack , we also talked about postcss , and we know that postcss can automatically add a browser prefix to some css attributes (such as user-select ). Will Vite automatically add a browser prefix for us? Let’s test this by adding the line user-select: none; to the src/css/title.less file:
@fontSize: 30px;
@fontColor: yellow;
.title {
font-size: @fontSize;
color: @fontColor;
user-select: none; //
}
Then we look at the effect in the browser:
As you can see, Vite does not add the browser prefix to the css property for us by default. So what can we do if we want it to do it for us automatically? Well, we can start by installing the postcss utility:
npm install postcss -D
After installing postcss , run npx vite to get the project up and running, and then see the results:
Still no effect, why? Because as we said, postcss is dependent on the corresponding plugin to help us realize the corresponding function, so we can install the postcss-preset-env plugin here (or autoprefixer plugin, but now postcss-preset-env is used more):
npm install postcss-preset-env -D
After installation, you also need to configure postcss , we can create a new postcss.config.js file in the project directory with the following contents:
module.exports = {
plugins: [
require('postcss-preset-env')
]
}
Note: When usingWebpackthepostcssside of the configuration plugin can directly pass in strings, but theViteside can’t, if you don’t import the plugin viarequire(), but pass in strings directly:module.exports = { plugins: [ 'postcss-preset-env' ] }Starting the project will report an error:
Then come back to the npx vite command to start the project and view the results in a browser:
As you can see, this time there’s the addition of the browser prefix.
4. Summary
You’ll notice that for css -related processing (whether it’s css or less or postcss ), we didn’t write any configuration for Vite , because Vite has all that built in for us. And you’ll notice that Vite is much more efficient than Webpack .
ViteProcessing ofcsscan be supported directly;- Just import directly into
css;
- Just import directly into
ViteThecsspreprocessor can be supported directly, e.g.less;Import directly to
less;After that install the
lesscompiler:npm install less -D
ViteDirect support forpostcssconversions;
Simply installpostcssand configure thepostcss.config.jsconfiguration file:npm install postcss postcss-preset-env -Dmodule.exports = { plugins: [ require('postcss-preset-env') ] }