//在 css 文件后面加 .module 后缀
import ‘./another-stylesheet.css’; // 普通引入
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}
网页中引用外部css文件有两种方式：link和@import，两者引用的方式在页面上的展现效果是一样的。link引用方式如下：
<link href=”styles.css” type=”text/css” />
@import引用方式如下：
<style type=”text/css”>@import url(“styles.css”);</style>
差别1 ：适用范围不同 @import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。 差别2： 功能范围不同 link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别3： 加载顺序不同 当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别4： 兼容性 由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别5： 控制样式时的差别 使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。
使用不同的方法来引用css样式表，最终到达的效果相同，但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。
在HTML中有三种引入css样式的方法：外部样式、内部样式、内联样式。
其中内部样式与内联样式可以在HTML网页中与html同时设置。
下面大家来看一下在HTML中同时设置css样式的方法：
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head><style type="text/css"> body {background-color: red} p {margin-left: 20px} </style></head>
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
style 属性规定元素的行内样式（inline style）
style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。
一共有4种编写方式。
1 内嵌式
顾名思义，内嵌式就是直接嵌在html文件中。
2 外链式
所谓外链式，就是把CSS代码保存在单独的.css文件中，然后用<link>标签引入这个文件。
3 导入式
导入式是在<style></style>标签对中写一个@，然后紧跟import，然后一个空格，再写url(css文件路径/css文件名)。
4 行内式
所谓行内式，就是直接在标签上面写style属性，然后style属性的值就是css语句。