在里面
我试图使用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.
解决方法
我刚刚遇到了这个问题并想出了一个解决方案.我很确定它是“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
},
