Detailed explanation of the steps for setting global styles in Vue2.0

This time I will bring you a detailed step-by-step explanation of setting global styles in Vue2.0. What are the precautions? The following is a practical case. One Get up and take a look.

Setting global styles for Vue requires several steps (if it is sass, just change less to sass)

Step one: Add the following code to main.js in the src directory, which is the entry file

require('!style-loader!css-loader!less-loader!./common/less/index.less')

This can be written in Vue version 1.0, but not in version 2.0. An error will be reported and a parsing error will be reported

require('./common/less/index.less')

Second step: In the webpack.base.conf.js configuration module in the build directory, you only need to add two modules under rules

module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}

Step 3: If an error is reported, you may not install the above dependencies. You need to add dependencies in the package.json file in the root directory

Step 4:Execute the command in the command window to install dependencies

npm install

Linux (ubuntu, deepin), Mac os system may prompt that the permissions are insufficient and need to obtain permissions, then you only need to obtain permissions in front

sudu npm install

If you need to use less later, just add the lang attribute to the style

<style></style>

If there are many public files, you can put them all in one file and implement global styles of multiple style files through public file links.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

How element-ui implements the reuse of Table components

detailed explanation of the scope usage of js

JS canvas makes rotation animation

The above is the detailed content of Detailed explanation of the steps for setting global styles in Vue2.0. For more information, please follow other related articles on the PHP Chinese website!