javascript – 在webpack postcss-loader中观看导入的css文件

2019-08-29 12:35:13 阅读：181 来源： 互联网

将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
  },
}

解决方法:

好的,

这个问题有两个错误,所以解决方法是：

>在press之前做atImport,谢谢@Kreozot.
>参考确切的css文件名.我的意思是：@import“base / _base-imports”而不是@import“base / base-imports”如果文件名为“_base-imports”.它没有像sass partial那样解决.

标签：postcss,javascript,webpack
来源： https://codeday.me/bug/20190829/1760833.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在webpack postcss-loader中观看导入的css文件