代码之家 › 专栏 › 技术社区 › Michael

Angular CLI无源映射用于LESS/SASS

angular-cli less sass angular css

Michael · 技术社区 · 7 年前

跑步 ng serve CSS放置在 <style> 按预期标记。

跑步 ng serve -ec CSS保存在其捆绑包中 styles.bundle.css

跑步 ng serve -ec -sm CSS仍然只显示在捆绑包中,似乎没有创建任何源映射。

注意:我们使用的更少。

Angular CLI: 1.6.2
Node: 6.11.2
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

1 回复 | 直到 7 年前

Michael 7 年前

这是由于Angular CLI的一个问题自v1.3.2以来一直处于打开和关闭状态,目前从v1.7起仍处于关闭状态。x个

做了更多的挖掘&比较webpack配置文件,发现新的CLI使用的webpack插件“raw loader”还不支持sourcemap(不知何故,票证已关闭,但我不确定sourcemap是否已实现)。

唯一的选择是降级到v1.6.6,然后应用@CharltonC提供的补丁

在“节点”中_modules@angular\cli\models\webpack configs\common。js”文件,在第162行中,在getCommonConfig函数中返回的公共配置对象中添加一行devtool:“source map”,例如。

...
catch (e) { }
return {
    devtool: 'source-map',        // add this line
    resolve: {
        extensions: ['.ts', '.js'],
         ...

在终端中使用以下命令进行测试(也适用于Sass@import):

ng serve           // no sourcemap
ng serve -sm -ec   // has sourcemap
ng serve --sourcemap --extract-css  // has sourcemap   
ng serve --sourcemap --extractCss   // has sourcemap

https://github.com/angular/angular-cli/issues/9099

推荐文章

Christian Luneborg · 星级评定不起作用

7 年前

jinfy · Less mixin不适用于带有逗号的参数

7 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

7 年前

Ruur · Sass通过引用分配变量

7 年前

epeleg · 将较少的混合器转换为SCS

7 年前

Michael · Angular CLI无源映射用于LESS/SASS

7 年前

KnD · 更少的延迟加载问题-在同一css文件中使用mixin和变量的ltr和rtl语言的样式

7 年前

Andy · 如何向现有的Angular 5项目添加更少的内容

7 年前

Øystein Seel · 从grunt迁移后,在网页包中失败的模块更少

7 年前

Patrickvanl · ::前后内容始终在内容上方和下方?

7 年前