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

Question

用的是vue，在组件中通过

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

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

    
    <style lang="sass"></style>

安装了sass-loader、node-sass。

Answer 1

一楼没听明白你的问题，二楼装傻。。 @import 和 import进来的模块webpack编译是有区别的，通常我们都适用import引入模块，但是当css模块化后，集体引入，会发现@import引入并不会被编译进去也不会刷新。解决方式:目前没有发现webpack上有什么解决的措施，只有改变我们书写的方式了.可以建立一个 style.jsimport "index.css"; import "module1.sass"; import "module2.sass";index.css 可以使用你说的那种方式，使用@import ".css" 用于引入不经常改变的热更新的 css 文件，比如default ｜ reset , 开发时使用 import 引用你使用的sass文件。如果有强迫症，可以每次开发完一个模块，再转换为 @import...

Answer 2

npm install style-loader css-loader sass-loaderloaders代码{test: /\.css$/, loader: 'style!css'}, {test: /\.scss$/, loader: 'style!css!sass')},目录结构a.jsstyle.scssa.jsimport './style.scss';style.scss.hello{    font-size:1rem; }