按照vue的做法还是不行
test: /\.vue$/,
loader: 'weex-loader',
options: {
loaders: {
css: ['weex-style', 'css-loader'],
stylus: ['weex-style', 'css-loader', 'stylus-loader']
}
}
按照vue的做法还是不行
test: /\.vue$/,
loader: 'weex-loader',
options: {
loaders: {
css: ['weex-style', 'css-loader'],
stylus: ['weex-style', 'css-loader', 'stylus-loader']
}
}
刚用wexx,折腾了下可以了,最新版在vue-loader.conf.js
加上如下
module.exports = (options) => {
return {
loaders: utils.cssLoaders({
// sourceMap: use sourcemao or not.
sourceMap: options && sourceMapEnabled,
// useVue: use vue-style-loader or not
useVue: options && options.useVue,
// usePostCSS: use postcss to compile styles.
usePostCSS: options && options.usePostCSS
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
lang: {
scss: ['sass-loader']
}
}
}
{
module: {
loaders: [{
test: /\.vue$/,
loader: 'weex-loader',
options: {
loaders: {
css: ['weex-style', 'css-loader'],
stylus: ['weex-style', 'css-loader', 'stylus-loader']
}
}
}]
},
weex: {
lang: {
css: ['weex-style', 'css-loader'],
stylus: ['weex-style', 'css-loader', 'stylus-loader']
}
}
}
我现在使用的是sass,没有使用stylus,配置如下;
package.json 的dev 中加入:
"node-sass": "^4.5.0",
"sass-loader": "^6.0.1",
webpack.config.js中的module:
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/, loader: 'style-loader!css-loader'
},
{
test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(we|vue)(\?[^?]+)?$/,
loader: loader + '-loader'
}
]
},
感谢大家的回答,昨天研究了weex-loader原码,发现在vue文件中不需要配置即可使用各种预处理器,只要在<style>中用lang="XX"指出就可以了。
@hayvane 的这种在native端是无用的,因为weex-loader会将css处理成json加载到模块style属性中。必须要使用'weex-vue-loader/lib/style-loader.js'来进行处理。
在native端的Css处理完全不是web端的概念,所以并不存在全局引用样式,也就是并不需要引入.sass.less.styl文件。
要实现样式的复用,最终实践出两种方法,一种是在vue中多加一个style标签
第二种方法是使用预处理器进行导入