logo标签列表

在Angular2中使用Webpack与SASS和PostCSS

angularjsangularsasswebpackpostcss
4

初始化

我正在尝试使用sass-loader和postcss-loader来使用webpack。我已经尝试了不同的解决方案，但都没有像我想要的那样工作。

我尝试了Angular 2 Starter Pack中的解决方案，使用了raw-loader和sass-loader，但是postcss-loader没有起作用。

代码

Angular 2组件

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls:  ['./app.component.scss']
    // styles: [
    //     require('./app.component.scss')
    // ]
})

Webpack 模块加载器

{
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader']
}

问题

使用这些代码可以正常工作，但样式被添加到 <head> 标签中的 <style> 标签内。到某个时候，我将会有成百上千行样式，我想避免这种情况。

如果我把我的加载器代码更改为：

loader: ExtractTextPlugin.extract('to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap')

并将此添加到webpack配置中

plugins: [
    new ExtractTextPlugin('style.css')
]

出现了错误。

未捕获的错误：期望'styles'是一个字符串数组。

在HTML代码中已经链接了style.css文件。

我正在寻找一种方案，允许我使用Sass、PostCSS和单个.css文件。

1个回答
0

我刚遇到这个问题并找到了解决方案。我相当确定是“to-string-loader”的问题。下面的开发配置对我来说可以在Webpack 4和Angular 7中工作。它允许全局样式表（在我的情况下是Tailwind CSS）与组件样式并存。同时，热模块替换也适用于编辑两个条目。

entry: {
    app: './src/main',
    styles: './src/assets/styles/styles'
},
resolve: {
    extensions: ['.ts', '.tsx', '.mjs', '.js', '.scss'],
},
module: {
    rules: [
        {
            // 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: 'postcss-loader', // Process Tailwind CSS
                    options: {
                        sourceMap: 'inline',
                    }
                },
                {
                    loader: 'sass-loader', // Compiles Sass to CSS
                },
            ]
        },
        {
            // Process the global tailwind styles
            include: path.resolve(__dirname, 'src/assets/styles/styles'),
            test: /\.(scss)$/,
            use: [
                {
                    loader: 'style-loader', // Allow for HMR
                },
                {
                    loader: 'postcss-loader', // Process Tailwind CSS
                    options: {
                        sourceMap: 'inline',
                    }
                },
                {
                    loader: 'sass-loader', // Compiles Sass to CSS
                },
            ]
        },
    ]
},

style-loader 会在运行时将样式提取到头部，并允许热更新。在您的生产配置中，您可以使用 css-loader 和 MiniCssExtractPlugin 一起将全局样式提取为 .css 文件并注入到头部：

{
    // Process the global tailwind styles
    include: path.resolve(__dirname, 'src/assets/styles/styles'),
    test: /\.(scss)$/,
    use: [
        { loader:  MiniCssExtractPlugin.loader },
        { loader: 'css-loader' },
        {
            loader: 'postcss-loader', // Process Tailwind CSS
            options: {
                sourceMap: false,
            }
        },
        {
            loader: 'sass-loader', // Compiles Sass to CSS
        },
    ]
},
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接