Question

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

__init__()

要添加全局顺风模块，我添加了另一个指向sass文件的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
            }
        },
    ]
}

和postcss加载程序是这样的：

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

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

Answer 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。具有样式加载器的该开发配置还允许在编辑组件样式和顺风样式时进行热模块替换。

如何使用Webpack和Angular将全局CSS样式与js中的组件样式一起使用？

1 个答案: