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

发布时间：2020-12-17 17:01:21 所属栏目：安全来源：网络整理

导读：在里面我试图使用webpack与sass-loader和postcss-loader.我已经尝试了不同的解决方案但没有任何工作像我想要的那样. 我尝试使用raw-loader和sass-loader从Angular 2 Starter Pack开始的解决方案,但是postcss-loader并没有起作用. 码角度2分量 @Component({

在里面

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

我尝试使用raw-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']
}

问题

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

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

loader: ExtractTextPlugin.extract('to-string-loader','sass-loader?sourceMap')

并将其添加到webpack配置

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

它会导致错误

Uncaught Error: Expected ‘styles’ to be an array of strings.

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

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

解决方法

我刚刚遇到了这个问题并想出了一个解决方案.我很确定它是“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,use: [
                {
                    loader: 'style-loader',// Allow for HMR
                },{
                    loader: 'postcss-loader',]
},

样式加载器将在运行时将样式提取到头部,并允许HMR.在你的prod配置中,你可以使用css-loader和MiniCssExtractPlugin来提取全局样式并将其作为.css文件注入头部：

{
    // Process the global tailwind styles
    include: path.resolve(__dirname,use: [
        { loader:  MiniCssExtractPlugin.loader },{ loader: 'css-loader' },{
            loader: 'postcss-loader',// Process Tailwind CSS
            options: {
                sourceMap: false,}
        },{
            loader: 'sass-loader',// Compiles Sass to CSS
        },

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!