Vue2.0 setting global style instance sharing-JS Tutorial-php.cn

Vue2.0 setting global style instance sharing

小云云

Release： 2018-01-18 11:36:08

Original

2607 people have browsed it

This article mainly introduces the global styles (less/sass and css) of Vue2.0 in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

It takes several steps to set the global style for Vue (if it is sass, just change less to sass)

The first step: Main in the src directory. js, that is, add the following code to the entry file

require(&#39;!style-loader!css-loader!less-loader!./common/less/index.less&#39;)

Copy after login

This can be written in the Vue1.0 version, but not in the 2.0 version, and an error will be reported with a parsing error

require(&#39;./common/less/index.less&#39;)

Copy after login

Step 2: Configure the module in webpack.base.conf.js in the build directory. You only need to add two modules under rules.

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

Copy after login

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

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

npm install

Copy after login

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

Copy after login

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

<style lang="less"></style>

Copy after login

If there are many public files, you can use the public file link to implement multiple style files in one file. Global styles

For the vue.js learning tutorial, please click on the special vue.js component learning tutorial and Vue.js front-end component learning tutorial to learn.

Related recommendations:

Detailed explanation of JavaScript modification of css local and global style codes

[Bootstrap]Global style (4) _html/css_WEB-ITnose

[Bootstrap]Global style (4) - Midsummer, Light Year

The above is the detailed content of Vue2.0 setting global style instance sharing. For more information, please follow other related articles on the PHP Chinese website!