如何使用 Webpack 和 Angular 将全局 css 样式与 in-js 组件样式一起使用？

Posted 2023-03-07

【中文标题】如何使用 Webpack 和 Angular 将全局 css 样式与 in-js 组件样式一起使用？

【英文标题】：How to have global css styles alongside in-js component styles using Webpack and Angular?

【发布时间】：2019-08-08 07:09:13

【问题描述】：

我有一个 Webpack + Angular 项目，我希望在组件样式旁边有一个单独的全局样式表，类似于 angular-cli 开箱即用的功能。我正在为组件样式使用 sass，并希望拥有一个全局顺风构建的样式表。我希望使用 MiniCssExtractPlugin 之类的东西将全局样式模块提取到头部。问题是我在尝试执行此操作时收到“未定义窗口中的错误”。 这是我的 webpack 样式配置，它按预期加载组件样式：

    test: /\.(scss|css)$/,
    use: [
        'to-string-loader', // Return component styles as strings
        
            loader: 'css-loader', // Translates CSS into CommonJS
            options: 
                sourceMap: true
            
        ,
        
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: 
                sourceMap: true
            
        ,
    ]

为了添加一个全局顺风模块，我添加了另一个指向 sass 文件的 webpack 入口：

entry: 
    app: './src/main',
    styles: './src/assets/styles/styles'

和这样的 postcss 加载器：

    test: /\.(scss|css)$/,
    use: [
        'to-string-loader', // Return component styles as strings
        
           loader: 'style-loader',
           options: 
               sourceMap: false
           
       ,
        
            loader: 'css-loader', // Translates CSS into CommonJS
            options: 
                sourceMap: true
            
        ,
        
            loader: 'postcss-loader', // Process tailwindcss,
            options: 
                plugins: [
                    tailwindcss('./tailwind.js'),
                    require('autoprefixer'),
                ],
            
        ,
        
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: 
                sourceMap: true
            
        ,
    ]

我在构建项目时收到“未定义窗口中的错误”。我的配置有什么问题？

【参考方案1】：

我仔细研究了 angular-cli 如何处理全局样式，并且这个修改后的配置对我有用：

    // Process the component styles
    exclude: path.resolve(__dirname, 'src/assets/styles/styles'),
    test: /\.(scss)$/,
    use: [
         loader: 'raw-loader' , // Load component css as raw strings
        
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: 
                sourceMap: true
            
        ,
    ]
,

    // Process the global tailwind styles
    include: path.resolve(__dirname, 'src/assets/styles/styles'),
    test: /\.(scss)$/,
    use: [
        
            loader: 'style-loader',
            options: 
                sourceMap: false
            
        ,
        
            loader: 'postcss-loader', // Process tailwindcss,
            options: 
                plugins: [
                    tailwindcss('./tailwind.js'),
                    require('autoprefixer'),
                ],
            
        ,
        
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: 
                sourceMap: false
            
        ,
    ]

解决方案是分别处理组件和全局样式。 raw-loader 比 css-loader 和 to-string-loader 工作得更好。这个带有样式加载器的开发配置还允许在编辑组件和顺风样式时进行热模块替换。