Javascript 如何使用SCS导入媒体查询？_Javascript_Css_Sass

Javascript 如何使用SCS导入媒体查询？

javascript css sass

Javascript 如何使用SCS导入媒体查询？,javascript,css,sass,Javascript,Css,Sass,我知道我可以将css模块导入到我的主css文件中，条件是它满足媒体查询要求，在@import规则中键入该条件。但是，当我尝试使用scss文件而不是css来做同样的事情时，它什么也做不了。如何像在CSS中一样在SCS中使用媒体查询以下是我在css中的代码： styles.css blue.css red.css index.html 但是，一旦我将格式从css更改为scss，它就不再工作。TLDR：无法在scss中执行媒体查询导入 @import规则在SCSS和CSS中的工作方式不同所有C

我知道我可以将css模块导入到我的主css文件中，条件是它满足媒体查询要求，在

@import

规则中键入该条件。但是，当我尝试使用scss文件而不是css来做同样的事情时，它什么也做不了。如何像在CSS中一样在SCS中使用媒体查询

以下是我在css中的代码：

styles.css blue.css red.css index.html

但是，一旦我将格式从css更改为scss，它就不再工作。

TLDR：无法在scss中执行媒体查询导入

@import

规则在SCSS和CSS中的工作方式不同

所有CSS都是有效的SCS…除了

@import

语句

在SCSS中，import语句只需要文件的路径和文件名。如果为了将文件合并为一个CSS文件而导入文件，则需要以下划线开头命名这些文件

如果您有类似于此结构的内容，其中断点文件名为“\u breakpoint.scss”：

/root/scss/main.scss

/root/scss/modules/_breakpoint.scss

然后，您需要以以下方式编写导入语句：

@import "modules/breakpoint";

.square{
  background:blue;
  width: 200px;
  height: 200px;
}

.square{
  width: 200px;
  height: 200px;
  background:red;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
  <link href="styles.css" rel="stylesheet">
  <title></title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

@import "modules/breakpoint";