在 webpack + postcss-loader 中观看导入的 css 文件
Watch imported css files in webpack + postcss-loader
我在将 Webpack 与 postcss-loader 结合使用来观看导入的 css 文件时遇到了一些麻烦。它们在第一次运行时正在处理,但是当我修改这些文件时,webpack 不会重新编译。
例如
我有我的主 css 文件,我可以在其中导入所有 css 模块:
...
/* Base imports */
@import "base/base-imports";
...
在基础导入中,例如,我为身体应用了颜色:
body {
background: tomato;
}
我现在将背景设置为另一种颜色,调试是否重新加载 css 文件,但不是。
这是我的 webpack 配置:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var fontMagician = require('postcss-font-magician');
var atImport = require('postcss-import');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /'.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
],
},
postcss: function(webpack) {
return [
autoprefixer({ browsers: ['last 2 versions'] }),
precss,
fontMagician,
atImport({
path: './src/styles/*.css',
addDependencyTo: webpack
}),
];
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'src/index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
],
devtool: 'source-map',
devServer: {
contentBase: './dist',
hot: true
},
}
好的,
这个问题有两点错误,所以解决方案是:
- 在 precss 之前做导入,谢谢@Kreozot。
- 引用确切的 css 文件名。我的意思是:如果文件名
"_base-imports"
,则@import"base/_base-imports"
而不是@import "base/base-imports"
。它不像一个屁股部分那样解决。
相关文章:
- 如何仅为某些类或id导入CSS
- 如何通过postCSS从库中导入css
- 使用公共JS文档优化静态网站的CSS/JS导入
- 导入模块失败's css文件
- 如何使用 js 动态导入 css
- 如何让导入的 css 字体/图标对影子 dom 中的元素产生影响
- 导入引导主题会损坏 Odoo 9 的 CSS 和 JS.我应该如何解决它
- Jasmine抱怨在单元测试中导入的css
- 无法从 webpack 中的 npm 导入 CSS
- 在 webpack + postcss-loader 中观看导入的 css 文件
- 无法使用 css 模块、webpack 和 react 导入样式
- 导入.js会禁用jQuery Mobile CSS样式
- 将HTML/CSS项目导入可视化前端编辑器
- 将css和js导入PHP代码点火器
- 从HTML代码段导入CSS样式
- 如何制作一个导入.css文件的按钮?
- Node.js不导入CSS和js文件
- 有没有办法通过browserify导入CSS库?
- 如何在 JSP 中导入.css和.js文件
- 在同构React组件中导入CSS文件