在Angular2中使用带有SASS和PostCSS的Webpack

Question

在里面

我试图使用webpack与sass-loader和postcss-loader。 我已经尝试了不同的解决方案但没有任何工作像我想要的那样。

我尝试使用原始加载器和sass-loader从Angular 2 Starter Pack解决方案，但是postcss-loader没有工作。

码

角度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']
}

问题

使用这些代码行一切正常，但样式将添加到<style>标记内的<style> <head>标记中。 在某些时候，我会有数百种样式线，我想避免。

如果我将加载程序代码更改为：

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

并将其添加到webpack配置

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

它会导致错误

未捕获的错误：预期的“样式”是一个字符串数组。

style.css实际上是在html代码中链接的。

我正在寻找一个允许我使用sass，postcss和单个.css文件的解决方案。

Answer 1

我刚刚遇到了这个问题并想出了一个解决方案。 我很确定它是“to-string-loader”。 下面的dev配置对我来说使用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
                },
            ]
        },
    ]
},

样式加载器将在运行时将样式提取到头部，并允许HMR。 在你的prod配置中，你可以使用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
        },
    ]
},

在Angular2中使用带有SASS和PostCSS的Webpack

问题描述

1 个解决方案

解决方案1
0 2019-03-19 00:30:51

在Angular2中使用带有SASS和PostCSS的Webpack

问题描述

1 个解决方案

解决方案1 0 2019-03-19 00:30:51

解决方案1
0 2019-03-19 00:30:51