Multi tool use

remove duplicate sass imports (webpack)

I have a big project with a lot of sass files (and all of them import a main sass file with some varibales and classes).

I belive you all know the problem that the file that i am import in all of my css files is duplicate in the main css file after buiding the project.

i tried using ExtractTextPlugin options and plugin that called OptimizeCssAssetsPlugin, and i didnt find solution for this problem.

Here is the plugins array in my webpack prod config:

new ExtractTextPlugin({
filename: "styles.css",
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /.optimize.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
canPrint: true
}),


anyone know the solution for this problem?

thank you!

1 Answer
1

Less users are in luck! @import (reference) does exactly what it that:

Use @import (reference) to import external files, but without adding the imported styles to the compiled output unless referenced.
However in Stylus /Sass, there is no direct way to import by reference:

The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass

Refernce: Rerernce

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.