vue的css样式报错,vue动态改变css样式

vue-cli css内样式报错 怎么屏蔽

发现根本不需要再配置这些了build/webpack.base.conf.js中注意这一行:module:{rules:[{test:/\.vue$/,loader:'vue-loader',options:vueLoaderConfig//vueLoaderConfig},]}其实vue-cli中已经完全配置好提取CSS到单独文件了具体配置可以查看文件build/vue-loader.conf.js中使用时直接在.vue文件中@import就好了@import'./assets/css/base.css';//这里用link的时候除了路径问题外style标签下的样式也会无效,具体为什么还不清楚

目前创新互联已为超过千家的企业提供了网站建设、域名、虚拟空间、网站托管运营、企业网站设计、隆林网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

vuejs的.vue文件中的style标签中的css样式,背景图路径不对?

带上重现去 github vue-loader 仓库开 issue.是按.vue的路径去算的吧?

打包后style会默认插入html,所以路径是按htmlj页面计算的

vue 怎么require css文件

首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即

?

1

require('./assets/css/main.less');

require();

这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析

这时,我们要填写上依赖,

?

1

require('!style!css!less!./assets/css/main.less');

在很多以前的博客里都是以上写法,这个是Vue 2.0刚开始的,现在使用会报错;下面是正确写法

?

1

require('!style-loader!css-loader!less-loader!./assets/css/main.less');

在以前配置到这里,就万事大吉了,也可以开始引入css文件了,然后现在到这里还会报错

当出现以上错误时,说明你的项目里缺少依赖;

?

1

npm install style-loader --save

这时你就可以引入css文件了;

求助啊,在vue2中使用vue-strap总是会报错Uexpected export

反响还不错,但是技术日新月异,各种技术更新迭代的非常快,在遇到新的技术后,往往就不愿意去了解旧的是怎么工作的。那么vue2的配置步骤也势在必出,vue2目前还没发布正式版,相信过不了多久就会正式发布,为了日后少挖坑,建议要认真阅读新版本的文档。这个事情上不能浮躁。

vue-cli也更新到了vue2,在vue2出来后不久,我就尝试了下按上文的步骤来搭建vue2,基本靠谱,改动的地方不多,这么说是不是可以偷懒只用写和vue1区别就完事了,似乎不合我心意,那么还是啰嗦点,按新手视角来,上文中的一些“啰嗦的话”就省略了,使步骤更简洁。有些变化不大的步骤就直接复制上文。

初始化项目

新建项目目录vue2practice,npm init初始化package.json,在package.json中添加必要的模块如下:

"devDependencies": {

"vue": "^2.0.7",

"vue-loader": "^9.9.5",

"vue-router": "^2.0.2",

"webpack": "^1.13.3",

"webpack-dev-server": "^1.16.2"

}

新建目录结构如下图,新建的文件先空着,后面步骤会说明添加什么内容。

这里写图片描述

配置webpack

webpack 默认读取 webpack.config.js,文件名不能随便改,其中 entry 是必须配置的。

module.exports = {

entry: './src/main.js'

}

配置 webpack-dev-server,在 package.json 添加以下启动参数即可。

"scripts": {

"dev": "webpack-dev-server --inline --hot --open"

}

配置了server,习惯性的测试下上述配置是否成功,确保后续步骤是在一个成功的基石上进行的,执行npm install,然后npm run dev、访问,能访问(可以在index.html添加内容来确认是否启动成功)则说明上面的配置ok。

Vue

新建“页面”

在 src/views 目录下新建一个 about.vue,相当于新建一个“页面”,后面访问 /about 的就是此页面的内容;

template

div

这是{ { page } }页面

/div

/template

script

module.exports = {

data: function () {

return {

page: 'about'

}

}

}

/script

配置路由

vue-router2和1区别还是蛮大的,舍弃了很多方法,详情请自行阅读,点击仔细阅读文档。vue-router2的配置更简单,直接new VueRouter({ routes: [{path: '/路由路径', component: '对应组件'}]}),因此可以把传入VueRouter的参数单独提取到router.js中,方便后续配置,外部直接调用new VueRouter( require(‘./router’) ) 即可。router.js配置如下:

module.exports = {

routes: [

{

path: '/about',

component: require('./views/about.vue')

}

]

}

首页

首页(index.html)只需引入打包后的 js 文件(src 和 webpack.config的 output 配置一致),#app是整个网站的挂载点,简单点说其实整个网站就是一个 vue 的实例,#app就是实例el属性值。

body

div id="app"/div

script src="dist/build.js"/script

/body

接下来就要配置入口js,这个也是和vue1区别比较大的地方,主要是vue-router不再使用VueRouter.start(App,'#app'),同样也使得挂载app需通过render函数的方式。

const Vue = require('vue');

const VueRouter = require('vue-router');

const App = require('./app.vue');

Vue.use(VueRouter);

const router = new VueRouter(require('./router'))

new Vue({

el: '#app',

router: router,

render: h = h(App)

})

首页布局app.vue也有变化,均源于vue-router2的改变,链接的方式改为router-link to="路由地址"链接名称/router-link

template

div

div

router-link to="/about"about/router-link

/div

div

router-view/router-view

/div

/div

/template

配置loader

还记得上文提到过,这时候启动会报错,提示一些loader未安装,那么是不是先把那些依赖的模块安装了再说?不慌!先启动看看。结果!!!

这里写图片描述

嗯???没有报错,一步到位!原来查看node_modules目录,发现vue-loader所依赖的模块都已经安装了。

这里写图片描述

谁安装的?难道是最新版的npm会自动安装,赶紧拿着vue1按着同样的配置验证,发现不对,原来是vue-loader2中已经将所依赖的模块放到了其目录下package.json中的“dependencies”,如图所示:

这里写图片描述

还有在vue文件中用部分ES6的语法也不会报错了,而且也没有配置js的loader,这也归功于vue-loader2依赖的vue-template-es2015-compiler。请注意是部分语法,比如import等还是要安装babel-loader的。

支持添加CSS

上面说过vue-loader 2.0所依赖的vue-style-loader安装好了,但其依赖的css-loader并没安装,需要自己安装,安装之后需要配置css的loader,这个可不会自动完成。

{

"css-loader":"^0.26.0"

}

如果只在vue文件中使用CSS是不用在webpack.config中配置loader的,这个工作vue-laoder 2.0已经做了,在1.0中需要自己配置,比如about.vue中添加了

style type="text/css"

.about {

color: #f00

}

/style

运行效果如下图:

这里写图片描述

如果想引用css文件的话,那就要配置loader了,配置如下:

{

test: /\.css$/,

loader: 'vue-style!css'

}

引用css文件的方式可以采用require,比如在about.vue中require('../css/about.css');,那么about.css的样式就会添加到页面中。

支持添加图片等静态资源

vue模板以及CSS中免不了使用图片,现在如果直接加,又会报找不到模块的错误,静态资源(图片、图标字体、音频、视频、svg文件等)对应的loader为url-loader,loader信息及配置如下:

{

"url-loader":"^0.5.7",

"file-loader":"^0.9.0" // url-loader依赖file-loader

}

{

test: /\.(jpe?g|png|gif|svg|mp3)$/,

loader: "url"

}

支持CSS预处理语言

实际项目中大多会采用less、sass、stylus中的一种预处理语言来组织整个项目的CSS,因此需要添加这些预处理语言对应的loader,各个预处理语言的loader信息如下:

{

"less": "^2.3.1", // less-loader依赖less

"less-loader": "^2.2.3",

"node-sass": "^3.4.2", // sass-loader依赖node-sass

"sass-loader": "^4.0.2",

"stylus": "^0.54.5", // stylus-loader依赖stylus

"stylus-loader": "^2.4.0"

}

同CSS,如果只在vue文件中使用,则不需要配置loader,如果想引用文件则要配置loader,在about.vue添加测试代码如下,实际项目中一般只会采用一种了。

template

div class="about"

div class="test-less"测试less/div

div class="test-sass"测试sass/div

div class="test-stylus"测试stylus/div

/div

/template

style lang="less"

@color: #00f;

.test-less {

color: @color;

}

/style

style lang="sass"

$color: #0ff;

.test-sass {

color: $color;

}

/style

style lang="stylus"

color = #f00;

.test-stylus {

color: color;

}

/style

运行效果如下:

这里写图片描述

如果想通过引用文件的方式来加载样式,那么就得配置loader了,配置如下:

{

test: /\.less$/,

loader: "vue-style!css!less"

},

{

test: /\.scss/,

loader: "vue-style!css!sass"

},

{

test: /\.styl/,

loader: "vue-style!css!stylus"

}

将about.vue中各种语言

require('../css/about.less');

require('../css/about.scss');

require('../css/about.styl');


网页名称:vue的css样式报错,vue动态改变css样式
网站URL:http://pwwzsj.com/article/dscdids.html