(Sass) How to Exclude My Imported Files to Compile to CSS Files

Ignore some .scss files in vscode live sass compiler

You can use liveSassCompile.settings.excludeList setting to exclude specific folders. All Sass/Scss files inside the folders will be ignored.

You can use negative glob pattern too if you want to exclude a specific file or files inside this folders.

Examples:

Default value

"liveSassCompile.settings.excludeList": [ 
     "**/node_modules/**",
     ".vscode/**" 
]

Negative glob pattern - if you want exclude all file except file1.scss & file2.scss from path/subpath directory, you can use the expression

"liveSassCompile.settings.excludeList": [
    "path/subpath/*[!(file1|file2)].scss"
]

You can find more info here.

How to make Sass not to compile my partial files?

https://sass-lang.com/guide

A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the @import
directive.

Thanks Arkellys.

How do I exclude a .css file from loading in application.scss in Rails?

You can use sprockets#stub and the filename to exclude in your application.css file, in order to prevent its load:

*= stub yootheme.css

And then to incorporate it manually, you have to add the file to your assets.rb, restart your server, and load the file by yourself using the stylesheet_link_tag helper:

# config/initializers/assets.rb
# Rails.application.config.assets.precompile += %w( yootheme.css )

# view
= stylesheet_link_tag 'yootheme.css', media: :all

Exclude some css files in webpack

So you want vendor prefixes don't add on Webpack generated vendor.css file.

Remember Webpack parse loader array on reverse order. You could add exclude property on the object of postcss-loader with the regular expression.

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
    return ({
        entry: {
            'vendor': './src/js/vendor.js',
            'app': './src/js/app.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].[chunkhash].js'
        },
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },// Take scss file and split into a separate css file
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'css-loader',
                    },// Interprets scss @import and url() like import/require()
                },
                {
                    test: /\.s(c|a)ss$/,
                    exclude: [/vendor/],
                    use: {
                        loader: 'postcss-loader',
                    },
                }, // PostCSS turns your SCSS file into a JS object & converts that object back to a SCSS file
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'sass-loader',
                    },// look for scss file through sass-loader, compile scss into css code
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css'
            }),
            // Before Build
            new FileManagerPlugin({
                onStart: {
                    delete: [
                        'dist',
                    ],
                }
            }),
        ]
    });
};

Scout-App: Ignore some files

If you add an underscore before the file name it should be ignored like so:

Your file: filename.sass

Converted file: _filename.sass

If you have a SCSS or Sass file that you want to import but don't want
to compile to a CSS file, you can add an underscore to the beginning
of the filename. This will tell Sass not to compile it to a normal CSS
file. You can then import these files without using the underscore.

Source

---

Related Topics