Skip to content

Not able to import without extension and when file contains comments #30

@StefanoSega

Description

@StefanoSega

So far my postcss.config.js file looks like this:

module.exports = ({ file, options, env }) => ({
  plugins: [
    require('postcss-easy-import'),
    require('postcss-url'),
    require('postcss-preset-env')({
      browsers: 'last 4 versions',
      stage: 0,
    }),
    require('postcss-strip-inline-comments'),
    require('postcss-sassy-mixins'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('pixrem')(),
    require('autoprefixer')({
      browsers: ['last 4 versions'],
    }),
    env === 'production' ? require('cssnano') : null,
  ],
});

and my webpack.config.js includes these parts:

 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

...

module: {
    rules: [{
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: true,
          sourceMap: true,
          localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
        },
      }, 'postcss-loader'],
    }],
  },
...
plugins: [
...
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: "[id].css"
    }),
  ],

the webpack build breaks always whenever:

  • I try to import into the .scss file loaded using css modules a file without specifying the full name, so to import a file named _settings.scss I cannot use settings.scss or _settings
  • whatever .scss file contains a comment starting with //; I get SyntaxError (1:1) Unknown word
  • If I want to import a file from a module e.g. Bootstrap mixins file it cannot resolve @import "bootstrap/scss/_mixins.scss"; as it returns the error Module not found: Error: Can't resolve './bootstrap/scss/_mixins.scss', I need to specify the full relative path @import "../../node_modules/bootstrap/scss/_mixins.scss";

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions