Skip to content
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

Open
lmk123 opened this issue Mar 27, 2017 · 6 comments
Open

让 WebStorm 支持高亮 <style> 标签内的 SCSS/Sass 语法 #53

lmk123 opened this issue Mar 27, 2017 · 6 comments

Comments

@lmk123
Copy link
Owner

lmk123 commented Mar 27, 2017

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 语法。

举例来说:

<!-- 下面的 style 块内支持 SCSS 的语法 -->
<style type="text/scss">
body {
  $height: 10px;
  div {
    height: $height;
  }
}
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style type="text/sass">
body
  $height: 10px
  div
    height: $height
</style>

<!-- 下面的 style 块内支持 Less 的语法 -->
<style type="text/less">
body {
  @height: 10px;
  div {
    height: @height;
  }
}
</style>

WebStorm 2016.3 及以前的版本

在 WebStorm 2016.3 及以前的版本,需要在 <style> 标签上加上 rel="stylesheet/scss",这样 WebStorm 就能正常解析 SCSS 的语法了。如果你使用的是 Sass 的语法,则加上 rel="stylesheet/sass"(只有一个字母不相同)。Less 则是加上 rel="stylesheet/less"

举例来说:

<!-- 下面的 style 块内支持 SCSS 的语法 -->
<style rel="stylesheet/scss">
body {
  $height: 10px;
  div {
    height: $height;
  }
}
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style rel="stylesheet/sass">
body
  $height: 10px
  div
    height: $height
</style>

<!-- 下面的 style 块内支持 Less 的语法 -->
<style rel="stylesheet/less">
body {
  @height: 10px;
  div {
    height: @height;
  }
}
</style>
@dear-lizhihua
Copy link

dear-lizhihua commented Apr 26, 2017

试下在 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">
      }
    }
  }]
}

@lmk123
Copy link
Owner Author

lmk123 commented Apr 26, 2017

@dear-lizhihua 你可以去试试 webpack-boilerplate,无论是 sass、scss 还是 less 都已经配置好了

@wangshaojie
Copy link

wangshaojie commented May 3, 2017

终于解决了,我转载到我的笔记里,默认楼主同意了( ̄▽ ̄)"

@conn4575
Copy link

conn4575 commented Nov 7, 2017

👍,强迫症晚期治好了,一片红我快要疯了

@suyanhanx
Copy link

新版本直接 lang="scss" 就好了~

@lmk123
Copy link
Owner Author

lmk123 commented Oct 11, 2019

新版本直接 lang="scss" 就好了~

@suyanhanx 已更新在文章里

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants