vueCli引用css样式的两种方式

安装使用

在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分代码,然后它根据lang属性自动判断出要使用的loaders。所以,其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
现在我们来安装sass/scss loader

 cnpm install sass-loader node-sass --save-dev

安装后,有的时候无需配置,vue-loader允许能根据lang属性自动判断出要使用的loaders;
如果不生效,则需要在webpack.base.conf.js中 rules增加以下配置.

{
test: /\.scss$/,
  loaders: ["style","css","sass"]
},

然后使用的时候引入 
@import "../static/css/user.css";
或者
 

注意:
在webpack.base.conf.js中没有配置rules,也是可以使用的;

使用区别
使用@import引入外部css,作用域是全局的
 import并不是引入代码到里面,而是发起新的请求获得样式资源,并且没有加scoped

我们只需把@import改成引入外部样式,就可以解决样式是全局的问题

 

你可能感兴趣的:(vue)