请问老师如何理解Partials

Question

老师我试了试，我把_button.scss的下划线去掉，然后在编译styles目录。也没有生成button.css文件啊。。。我应该如何理解这个Partials import的作用。

我认为是他不进行单独文件的编译，可是及时没有下划线@import也不会单独生成button.css文件呀

Answer 1

张轩 2021-08-16 11:10:58

同学你好 Partials 最简单的理解就是它只能被 import，不能被单独的编译成 css 文件。这是针对一次编译多个文件来说的，你可以试一下，一个文件夹两个 scss 文件，一个 root.scss,一个 _vars.scss。

// 第一个 scss 文件夹名 -o 是输出文件夹名称
npx node-sass scss -o output
// 只会有一个文件生成
Rendering Complete, saving .css file...
Wrote CSS to /Users/liusha/Public/vikingship/output/root.css
将 _vars 该名称为 vars.scss
再执行一遍：
Rendering Complete, saving .css file...
Wrote CSS to /Users/liusha/Public/vikingship/output/root.css
Rendering Complete, saving .css file...
Wrote CSS to /Users/liusha/Public/vikingship/output/vars.css
会有两个文件生成

这样你应该理解了吧～

• 提问者 hy_wang #1

  请问下老师，比如我们的react项目我发现编译后仅仅生成了一个css文件。(此时我sass文件并不是_开头的)。那这是wepback哪里处理的呢

• 张轩 回复 提问者 hy_wang #2

  这属于 create-react-app 底层在处理，其实没啥特殊的，就是 style-loader 加 sass-loader，源代码请见：https://github.com/facebook/create-react-app/blob/f0a837c1f07ebd963ddbba2c2937d04fc1b79d40/packages/react-scripts/config/webpack.config.js#L524

• 提问者 hy_wang #3

  非常感谢！