“This is the 15th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

1. css

Currently, there is no CSS code in the basic use of vite projects, but in real projects, there will be CSS code, so vite can help us to do CSS support? Create a style. CSS file in the SRC folder and create it as follows:

body {
  background-color: #f66;
}
Copy the code

Now that you have this CSS file, think about it. Is the CSS file now packaged? Apparently, no. Because it is not in the dependencies of the project, it will not be packaged. So what are the dependencies of the project? The entries that the project depends on are in the entry file index.html:

<script src="./src/main.js" type="module"></script>
Copy the code

We can import the style. CSS file in SRC /main.js and add it to the dependencies of the project:

After you save the changes, you’ll see a message printed on the terminal telling us that the page has been reloaded. Now look at the browser page:

As you can see, the background color of the page has successfully changed to the color we set. As you can see, the CSS code is already in effect, so Vite supports CSS code processing by default (instead of using CSS-loader and style-loader as with Webpack). It is also done by inserting a

2. less

What if there is less code in the project? For example, we add a few lines of code to the SRC /main.js file to create the

element with the title class applied and add some text to the element: 
.const titleEl = document.createElement('div')
titleEl.className = 'title'
titleEl.innerText = "Hello Vite"
document.body.appendChild(titleEl)
Copy the code

Then create a new title. Less file in the CSS folder with the following content (give the title class some styling) :

@fontSize: 30px;
@fontColor: yellow;

.title {
  font-size: @fontSize;
  color: @fontColor;
}
Copy the code

Next, add the title.less file to the SRC /main.js file:

After saving the changes, you will find the terminal error:

The current preprocessor needs to rely on less, but Vite didn’t find it. It is true that we have not installed it yet, so we need to install less first. In Vite, we don’t need to use less loader anymore, but we still use less tools) :

npm install less -D
Copy the code

After installing less, run the NPX vite command to start the project:

Now there is no problem. Let’s look at the effect in the browser:

As you can see, the font sizes and colors of Hello Vite have been rendered successfully, and Vite has compiled less code into CSS code.

3. postcss

We talked about PostCSS earlier in Webpack, and we know that postCSS automatically prefixes certain CSS properties, such as user-select. So will Vite automatically add browser prefixes for us? To test this, add user-select: None to SRC/CSS /title.less; This line of code:

@fontSize: 30px;
@fontColor: yellow;

.title {
  font-size: @fontSize;
  color: @fontColor;
  user-select: none; // Add the user-select attribute to test whether the browser prefix is added}Copy the code

Then let’s look at the effect in the browser:

As you can see, Vite by default does not help us to add browser prefixes to CSS properties. So what if we want it to automatically add for us? So, we can first install the PostCSS tool:

npm install postcss -D
Copy the code

After installing postcss, execute NPX vite to run the project.

It still doesn’t work. Why is that? As we said, PostCSS relies on a preset plugin to help us realize its function, so we can install postCSs-Preset -env (or autoprefixer, But now postCSs-preset -env is used more) :

npm install postcss-preset-env -D
Copy the code

After installed, also need to configure postcss, we can in the project directory postcss. New config. Js files, content is as follows:

module.exports = {
  plugins: [
    require('postcss-preset-env')]}Copy the code

Note: With Webpack, postCSS configuration plugins can pass strings directly, but Vite does not. If you do not import the plugins via require(), you can pass strings directly:

module.exports = {
  plugins: [
   'postcss-preset-env']}Copy the code

An error occurs when starting a project:

Then run the NPX vite command to start the project.

As you can see, this time there’s a browser prefix.

4. Summary

You’ll notice that for CSS-related processing (whether CSS or LESS or PostCSS), we didn’t write any configuration for Vite, because Vite already built it for us. And you’ll find that Vite is much more efficient than Webpack.

  • Vite supports CSS processing directly;

    • Direct importcssCan;

  • Vite can directly support CSS preprocessors, such as Less;

    • Import less directly;

    • Then install the less compiler:

      npm install less -D
Copy the code

  • Vite directly supports postCSS conversion;

    • Install postcss and configure the postcss.config.js configuration file:

      npm install postcss postcss-preset-env -D
Copy the code
      module.exports = {
  plugins: [
    require('postcss-preset-env')]}Copy the code