并排运行 angularjs 和 angular 应用程序时，CSS 不会编译

Question

尝试使用 angular-cli 转换为混合 angularjs/angular 应用程序时，我的 css 遇到了问题。

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!../node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:4) Unknown word

  1 | //
> 2 | // Copyright 2017 Google Inc.
    |    ^
  3 | //
  4 | // Permission is hereby granted, free of charge, to any person obtaining a copy

我以前使用 webpack 来处理我的 css/scss:

{
    test: /\.(css|scss)$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
        loader: 'css-loader',
        options: {
            sourceMap: true
        }
        },
        {
        loader: 'sass-loader',
        options: {
            sourceMap: true,
            includePaths: ['./css', './node_modules']
        }
        },
        {
        loader: 'postcss-loader',
        options: {
            sourceMap: true,
            plugins: () => [
            postcssCustomProperties({
                importFrom: ['./css/variables.css']
            })
            ]
        }
        }
    ]
}

似乎 angular-cli 的 webpack 构建处理 css 的方式与我的旧 angularjs 元素不同。我想让我的 angularjs 元素与新的 Angular 元素分开。我如何构建和包含我的 angularjs 元素中的所有“旧”css？

Answer 1

如果我没有正确理解你的问题，你有一些来自你的 angularjs 元素的 css 文件，你想将它们添加到你的 angular 元素中。目前尚不清楚您是希望将它们与应用程序捆绑在一起，还是只是想将两个元素放入一个 dist 文件夹中。

如果你想在 angular 中包含你的 angularjs css 文件，你有几个选择:

angular.json> 样式将样式直接添加到您的 angular.json 文件中。

"styles": [
  "/some/styles/cssfile.css"
],

使用 Assets 目录你可以随时将任何你想要的东西放入 assets 目录，它会按原样打包。确保您的 angular.json 捆绑了您的 Assets 目录(我不记得这是不是默认设置)。

"assets": [
  "src/favicon.ico",
  "src/assets"
],

其他选项

• 将您的文件引用添加到您新的 Angular 应用程序中的 index.html 文件。
• 只需将您的 css 文件导入 Angular 元素中的主 styles.scss 文件 (@import 'some/ref')。