开发工具:WebStorm
遇到的问题:文件名为app.less不会自动生成app.wxss文件
问题详细描述:在开发小程序的时候使用了less,webstorm配置了对应的less 转 wxss的文件,一开始都是都是好好的,但是今天下午突然发现文件名为app.less的文件不能转变为app.wxss文件,但是其他文件名的都可以转化,而且使用lessc app.less > app.wxss也可以正常生成app.wxss文件。初步怀疑是WebStorm工具的问题,但是一直没有找到问题出在哪里,求大神讲解。(ps:好像不应该发这个贴子在社区里面,但是真心不知道去哪里问,呜呜呜)
我用的gulp,gulpfile.js如下
const gulp = require(
'gulp'
);
const changed = require(
'gulp-changed'
);
const less = require(
'gulp-less'
);
const rename = require(
'gulp-rename'
);
const clean = require(
'gulp-clean'
);
const DIST =
'./dist'
gulp.task(
'clean'
,
function
() {
return
gulp.src(DIST).pipe(clean());
})
gulp.task(
'less'
,
function
() {
gulp.src(
'./src/**/*.less'
)
.pipe(changed(DIST))
.pipe(less())
.pipe(rename(
function
(path) {
path.extname =
'.wxss'
;
}))
.pipe(gulp.dest(DIST))
});
gulp.task(
'pages'
,
function
() {
return
gulp.src([
'!src/**/*.less'
,
'!src/project.config.json'
,
'src/**'
])
.pipe(changed(DIST))
.pipe(gulp.dest(DIST))
})
gulp.task(
'init'
, [
'clean'
],
function
() {
// less
gulp.src(
'./src/**/*.less'
)
.pipe(less())
.pipe(rename(
function
(path) {
path.extname =
'.wxss'
;
}))
.pipe(gulp.dest(DIST))
// other files
gulp.src([
'!src/**/*.less'
,
'!src/project.config.json'
,
'src/**'
]).pipe(gulp.dest(DIST));
})
gulp.task(
'auto'
,
function
() {
gulp.watch([
'src/**/*.less'
], [
'less'
]);
gulp.watch([
'src/**'
,
'!src/**/*.less'
,
'!src/project.config.json'
], [
'pages'
]);
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
// gulp.task('default', ['less', 'pages', 'auto'])
gulp.task(
'default'
, [
'init'
,
'auto'
]);
我也出现了这样的问题,问题的原因是你在其他的less文件(如:a.less)中@import了app.less
这样webstrom就会自动把app.less的内容加载到你引入a.less生成的a.wxss中
解决方案:查找一下@import "./xxx/app.less"的地方删除 @import app.less行 即可