0

我有一个 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
            }
        },
    ]
}

为了添加一个全局 tailwind 模块，我添加了另一个指向 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
            }
        },
    ]
}

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

4

1 回答 1

0

我仔细研究了 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 工作得更好。这个带有样式加载器的开发配置还允许在编辑组件和顺风样式时进行热模块替换。

于 2019-03-18T15:28:12.690 回答