请问为什么webpack 编译sass 的import不解析？

Question

用的是vue，在组件中通过

@import './st/css/reset.scss';

不会解析，只能用里面不是用sass语法写的内容。如果直接在组件中用sass语法是可以编译，比如：

    
    
<style lang="sass">

</style>

安装了sass-loader、node-sass。

Answer 1

npm install style-loader css-loader sass-loader

loaders代码

{test: /\.css$/, loader: 'style!css'},
{test: /\.scss$/, loader: 'style!css!sass')},

目录结构

a.js
style.scss

a.js

import './style.scss';

style.scss

.hello{
    font-size:1rem;
}

Answer 2

一楼没听明白你的问题，二楼装傻。。 @import 和 import进来的模块webpack编译是有区别的，通常我们都适用import引入模块，但是当css模块化后，集体引入，会发现@import引入并不会被编译进去也不会刷新。解决方式:

目前没有发现webpack上有什么解决的措施，只有改变我们书写的方式了.可以建立一个 style.js

import "index.css";
import "module1.sass";
import "module2.sass";

index.css 可以使用你说的那种方式，使用@import ".css" 用于引入不经常改变的热更新的 css 文件，比如default ｜ reset , 开发时使用 import 引用你使用的sass文件。如果有强迫症，可以每次开发完一个模块，再转换为 @import...

Answer 3

<style lang="scss">

</style>

要写成scss