Closed archiewx closed 6 years ago
我看截图里有中文...我就中文回答了哈23333
截图的53行之前都是有样式的,53行后失去样式了, 是不是问题出现在53行到54行间的代码? 如果可以, 提供下这个配置文件啊, 没有文件光看截图, 难以找出问题(话说我还不会webpack =_=)
这个配置文件使我们项目组都在用的配置文件,不会出错的。整体给你复制下来你看看
/*
* @Author: Administrator
* @Date:2016-11-18 09:53:21
* @Last Modified by: yw4295
* @Last Modified time: 2017-04-14 14:15:08
*/
const webpack = require('webpack'),
path = require('path'),
yargs = require('yargs').argv,
ssi = require('connect-ssi'),
history = require('connect-history-api-fallback'),
BrowserSyncPlugin = require('browser-sync-webpack-plugin');
// const pkg = require('./package.json');
const projects = require('./project.config.js');
let pdir = {},
pitem, NODE_ENV;
let config, plugins = [],
output;
if (yargs.d || yargs.p) {
pitem = projects.filter(item => item.name === (yargs.d || yargs.p))[0];
pdir.base = path.join(`${__dirname}/${pitem.name}`);
pdir.host = pitem.host;
pdir.port = pitem.port;
pdir.src = path.join(`${pdir.base}/src`);
pdir.asset = path.join(`${pdir.base}/asset`);
pdir.dest = path.join(`${pdir.base}/dist/${pitem.version}`);
NODE_ENV = yargs.p ? '"production"' : '"development"';
config = {
entry: {
'app': path.join(`${pdir.src}/boot/app.js`)
},
output: {
path: pdir.asset,
// publicPath: pdir.asset,
chunkFilename: '[name].js',
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.vue', '.jsx', '.scss'],
alias: {
'@': pdir.src,
boot: path.join(`${pdir.src}/boot`),
c: path.join(`${pdir.src}/component`),
js: path.join(`${pdir.src}/js`),
img: path.join(`${pdir.src}/img`),
v: path.join(`${pdir.src}/view`),
css: path.join(`${pdir.src}/css`),
sass: path.join(`${pdir.src}/sass`),
less: path.join(`${pdir.src}/less`),
tpl: path.join(`${pdir.src}/tpl`),
media: path.join(`${pdir.src}/media`)
},
modules: ['modules', 'node_modules']
},
module: {
// 各种加载器,即让各种文件格式可用require引用
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [
{
loader: 'postcss-loader',
options: {
sourceMap: false,
config: {
path: '.postcssrc.js'
}
}
}]
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: {
loader: 'url-loader?limit=10240&name=img/[name]-[hash:16].[ext]'
}
},
{
test: /\.(mp3|swf|wav|wma|mid|ogg|rm|rmvb|mpg|3gp|wmv|asf|mov|avi|mp4|mkv|flv|dat|mod)\??.*$/,
use: {
loader: 'url-loader?limit=10240&name=media/[name]-[hash:16].[ext]'
}
},
{
test: /\.tpl$/,
use: {
loader: 'text-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.vue$/,
exclude: '/node_modules/',
use: {
loader: 'vue-loader',
options: {
loaders: {
'css': ['vue-style-loader', 'css-loader']
}
}
}
},
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
},
{
test: /\.jsx$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
}
],
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
},
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV
}
}),
new BrowserSyncPlugin({
host: pdir.host,
port: pdir.port,
files: `${pdir.base}/**/*.html`,
server: {
baseDir: [pdir.base, `${pdir.base}/../`],
index: 'index.html',
routes: {
'/modules': 'modules'
},
middleware: [
ssi({
baseDir: pdir.base,
ext: '.html'
}),
history({
index: '/index.html'
})
]
}
})
]
};
// 生产环境
if (NODE_ENV === '"production"') {
plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV
}
}),
// new webpack.IgnorePlugin(/^lib\/rap-sodao(\.js)?$/),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true
},
exclude: /(node_modules|bower_components|web_modules)/,
mangle: {
except: [
'$super', '$', 'exports', 'require', 'define', 'module',
'modules', '__webpack_require__', '_']
}
})
];
output = {
'path': pdir.dest,
'chunkFilename': '[name]-[chunkhash:16].js'
};
Object.assign(config.output, output);
Object.assign(config.plugins, plugins);
}
}
module.exports = config;
你的主题很好看。我一直使用着,就是这里有点问题,我也不清楚主题是如何解析js代码高亮的。您看看是不是和es6里面的文本模板有关。
尴尬了...您的配置文件 我复制进我在VSCode新建的js文件, 显示全部正常, 您再看下?
另外制作/修改主题的代码渲染颜色机制也并不复杂.
按下Ctrl+Shift+P
(Windows) 或 Cmd+Shift+R
(Mac), 打开VSCode的指令窗口, 输入scope, 选中图中这个命令, 回车, 就可以检查文件中所有代码的scope值.
每个代码的scope值不是唯一的, 越往上, 代表锁定范围越小越精确.
最后在主题的json文件里以下图格式设置各种scope值的代码字体样式/颜色.
这就是制作/修改主题的全过程, 现在您的文件在我电脑上显示正常, 您可以以这种方式自查下.
谢谢。很感谢。良心主题。
话题结束了不知道是否能继续提?
这是我最近发现的问题。尴尬了。js中使用了flow
这是我最近准备测试一下。随便写了一下。在flow 里面包含了一个限定对象类型语法是{| |} ,我看到eva似乎不能正确识别语法高亮。您可以看看
按照您说的,我这里查看了一下,发现两边位置找到的scopes不一样啊。
我照你的图片打了遍
图上问题出的有点多: 右侧的 }) 及 左侧的 return [ex, option]、export default throttle 显示颜色都不正常(即此时它们的Scope值是不正常的)。
我没用过flow, 但我把鼠标放在 |} 中间, 选中符号只是 }, 所以我猜flow里限定对象类型的语法是 | | , 如果语法是 {| |}, 那么选中的会是 |} , 我尝试着在 |} 中间输了个空格(并不是一次试成, 在其它地方也试了), 显示就正常了。
这说明VSCode在这里把 |} 这种写法视为了语法错误(因此还影响了后面字符的识别)。通常这种大面积字符显示错误都是语法或书写格式错误(上次webpack问题也是), 具体为什么会这样, 这就是VSCode识别字符的算法问题了, 制作主题的过程并没有深入到这个层面。也许你可以就这个问题去VSCode下提个issue: js flow代码如下XXXX, 问 为什么这里少个空格会导致后面字符识别错误, Scope值分配错误?
很刁钻的问题哦(:з」∠)
而且我觉得VSCode的字符识别算法并不清晰高明, 同样的字符在不同语言、不同位置分配的Scope值非常混乱和不同, 制作主题的过程就是一个查漏补缺把理应颜色相同的字符Scope值全部归到一起, 比如
按理4种括号, 每种括号一个Scope值就够了吧?但实际就是这么多这么混乱。
上次webpack问题, 因为我复制你的配置文件显示完全正常, 说明问题不出在主题插件上, 在详细回复完后, 等了二天没看到你的回复, 我认为问题解决了, 就关了issue。之后的一段时间 我也每隔几天来打开这个issue看你有没有回复。以后有新问题可以继续在这下面留言(才发现有留言我就会收到邮件), 或者开新issue, 在问题解决后记得关闭issue。
另外告诉你如果是主题显示错误, 大概率是某些字符在特定环境下的Scope值未被囊括在任何一个已有的Scope集合里, 如下图
少数部分是字符显示颜色不符合语义化。
如果你遇到这二种情况, 非常欢迎提交给我 !
好的。感谢回复。这个主题我一直在用。也推荐给朋友了。good。
not format.