-
Notifications
You must be signed in to change notification settings - Fork 34
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
让 WebStorm 支持高亮 <style> 标签内的 SCSS/Sass 语法 #53
Comments
试下在 webpack.config.js 配置 vue-loader,这里是官方文档,是微信群里大家告我的方法。 <style lang="scss"></style> {
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}]
} |
@dear-lizhihua 你可以去试试 webpack-boilerplate,无论是 sass、scss 还是 less 都已经配置好了 |
终于解决了,我转载到我的笔记里,默认楼主同意了( ̄▽ ̄)" |
👍,强迫症晚期治好了,一片红我快要疯了 |
新版本直接 lang="scss" 就好了~ |
@suyanhanx 已更新在文章里 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
WebStorm 很早就支持了
*.scss
或*.less
文件的语法高亮,但偶尔我们会需要在 HTML 文件的<style>
标签内写 SCSS 或 Less 的语法(例如使用 Vue.js 的朋友应该会需要在*.vue
文件的<style>
标签内写 SCSS),其实 WebStorm 也是支持的,但是官方文档上好像并没有提及。WebStorm 2019.1 及之后的版本
在
<style>
上加lang="scss"
、lang="sass"
和lang="less"
就可以分别支持 SCSS、Sass 和 Less 的语法了。WebStorm 2017.1 及之后的版本
在升级到 WebStorm 2017.1 之后,我发现 2016.3 及以前版本的方法已经不起作用了。谷歌了半天也没有找到类似问题,于是尝试了各种方法,还真被我试出来了 😂
WebStorm 2017.1 及之后的版本需要使用
type="text/scss"
或type="text/sass"
来支持 SCSS 或 Sass 语法,使用type="text/less"
来支持 Less 语法。举例来说:
WebStorm 2016.3 及以前的版本
在 WebStorm 2016.3 及以前的版本,需要在
<style>
标签上加上rel="stylesheet/scss"
,这样 WebStorm 就能正常解析 SCSS 的语法了。如果你使用的是 Sass 的语法,则加上rel="stylesheet/sass"
(只有一个字母不相同)。Less 则是加上rel="stylesheet/less"
。举例来说:
The text was updated successfully, but these errors were encountered: